d3 linechart string domain x-axis

Question

我是相对较新的D3,我无法弄清楚为什么有些东西不起作用..我想用d3绘制一个折线图,这很好用,但我的轴有问题.

使用以下代码在某处出错,我看不出如何解决...

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

如果d.age是一个整数(如1; 2; 3等),它运作良好.但我想在x轴上使用字符串.喜欢("荷兰","英格兰","比利时").

因此,如果d.age是一个整数,它会绘制图表,如果d.age是一个字符串,它不会绘制任何东西.

我也试过使用序数而不是线性,但这给出了一个不正确的图表.(奇怪的看起来......).

希望有人可以帮助我.

Answer 1

如果要在轴上使用分类值,则需要分类(序数)比例.看看文档.你的代码看起来像

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

请注意,这用于map提取字符串值 - 这可能会也可能不会在您的特定浏览器中实现,请参阅此处了解更多详细信息.

Answer 2

使用

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

这里是小提琴链接 http://jsfiddle.net/sk2Cf/