d3 linechart string domena oś X

Question

Jestem względnie nowy w D3 i nie mogę zrozumieć, dlaczego coś nie działa .. Chcę narysować wykres liniowy z d3, a to działa dobrze, ale mam problemy z osiami.

z następującego kodu to idzie źle gdzieś, a ja nie wiem, jak rozwiązać ...

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

jeśli d.age jest liczbą całkowitą (jak 1; 2; 3 itd), to działa dobrze. Ale chcę ciągi na osi X. jak ("holandia", "Anglia", "Belgia").

Jeśli więc d.age jest liczbą całkowitą, rysuje wykres w porządku, jeśli d.age jest ciągiem, nic nie rysuje.

Próbowałem też zamiast liniowego używać liczby porządkowej, ale dało to nieprawidłowy wykres. (dziwne wyglądające linie ...).

Mam nadzieję, że ktoś może mi pomóc.

Answer 1

Jeśli chcesz użyć wartości kategorycznych na osi, potrzebujesz skali kategorycznej (porządkowej). Spójrz na the documentation. Twój kod będzie wyglądać

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

pamiętać, że ta wykorzystuje map wyodrębnić wartości ciągów - to mogą lub nie mogą być realizowane w danej przeglądarce, patrz here więcej szczegółów.

Answer 2

Zastosowanie

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

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