d3.js - D3折线图字符串域x轴

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 轴上的字符串。喜欢("netherlands", "England", "Belgium")。

所以如果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/