d3 linchart string domain x-achse

Question

Ich bin relativ neu zu D3, und ich kann nicht herausfinden, warum etwas nicht funktioniert .. Ich möchte ein Liniendiagramm mit d3 zeichnen, und das funktioniert gut, aber ich habe Probleme mit den Achsen.

Mit dem folgenden Code geht es irgendwo falsch, und ich sehe nicht, wie zu lösen ...

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

wenn d.age eine ganze Zahl (wie 1, 2, 3 usw.), es funktioniert Gut. Aber ich möchte Strings auf der X-Achse. wie ("Niederlande", "England", "Belgien").

Wenn also d.age eine Ganzzahl ist, zeichnet es die Grafik in Ordnung, wenn d.age eine Zeichenkette ist, zeichnet es nichts.

Ich versuchte auch anstelle von linear, Ordnungszahl zu verwenden, aber das gab eine falsche Tabelle. (komisch aussehende Linien ...).

Hoffe jemand kann mir helfen.

Answer 1

Wenn Sie kategoriale Werte auf einer Achse verwenden möchten, benötigen Sie eine kategoriale (ordinale) Skala. Schauen Sie sich the documentation an. Ihr Code wäre so etwas wie

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

Hinweis sehen, dass diese map verwendet die String-Werte zu extrahieren - dies kann oder kann nicht in Ihrem speziellen Browser implementiert werden, finden Sie here für weitere Details.

Answer 2

Verwenden

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

Hier Fiddle Link- ist http://jsfiddle.net/sk2Cf/