d3 linechart chaîne domaine x-axe

Je suis relativement nouveau à D3, et je ne peux pas comprendre pourquoi quelque chose ne fonctionne pas..
Je veux dessiner une ligne graphique avec d3, et cela fonctionne bien, mais j'ai des problèmes avec les axes.

Avec le code suivant, il va mal quelque part et je ne vois pas comment le résoudre...

var x = d3.scale.linear()
.range([0, width]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

x.domain(d3.extent(data, function(d) { return d.age; }));

si d.l'âge est un nombre entier (comme 1;2;3, etc), il fonctionne bien. Mais je veux chaînes sur l'axe des abscisses. comme ("pays-bas", "Angleterre", "Belgique").

Donc, si d.l'âge est un nombre entier, il dessine le graphique ok, si d.l'âge est une chaîne, il n'est pas de dessiner n'importe quoi.

J'ai également essayé au lieu de linéaire à utiliser ordinale, mais cela a donné un mauvais tableau. (bizarre à la recherche de lignes...).

Espère que quelqu'un pourra m'aider.

source d'informationauteur Vincent Hogendoorn

  1. 17

    Si vous souhaitez utiliser catégorique valeurs sur un axe, vous avez besoin d'un catégorielles (ordinale) échelle. Jetez un oeil à la documentation. Votre code devrait ressembler à quelque chose comme

    var x = d3.scale.ordinal().rangeRoundBands([0, width]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");

x.domain(data.map(function(d) { return d.country; }));

    Remarque que cela utilise map pour extraire la chaîne de valeurs, ce qui peut ou ne peut pas être mis en œuvre dans votre navigateur, voir ici pour plus de détails.

  2. 5

    Utilisation 

    var x = d3.scale.ordinal().rangePoints([0, width]);

    Ici est le Violon Lien
    http://jsfiddle.net/sk2Cf/