d3 linechart string dominio asse x

Question

Sono relativamente nuovo a D3, e non riesco a capire perché qualcosa non funziona .. Voglio disegnare un grafico a linee con d3, e questo funziona bene, ma ho problemi con gli assi.

Con questo codice le cose vanno male da qualche parte e non vedo come risolvere ...

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; })); 

se R.età è un numero intero (come 1; 2; 3, ecc), funziona bene. Ma voglio stringhe sull'asse x. come ("netherlands", "Inghilterra", "Belgio").

Quindi se d.age è un numero intero disegna il grafico ok, se d.age è una stringa non disegna nulla.

Ho anche provato invece di usare l'ordinale, ma questo ha dato un grafico errato. (strane linee di sguardo ...).

Spero che qualcuno possa darmi una mano.

Answer 1

Se si desidera utilizzare valori categoriali su un asse, è necessaria una scala categoriale (ordinale). Dai un'occhiata a the documentation. Il tuo codice sarebbe simile

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; })); 

notare che utilizzando map per estrarre i valori di stringa - questo può o non può essere implementato nel browser particolare, vedere here per maggiori dettagli.

Answer 2

Usa

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

Ecco Fiddle link http://jsfiddle.net/sk2Cf/