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

Question

我是D3的新手，我弄不清为什么有些东西不起作用。
我想用d3绘制一个线图，效果很好，但是 Axis 有问题。

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

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是一个整数，它将绘制图形OK，如果d.age是一个字符串，则它不会绘制任何图形。

我还尝试了使用线性而不是线性的方法，但这给出了错误的图表。 (奇怪的线条...)。

Answer 1

如果要在 Axis 上使用分类值，则需要分类(有序)标度。看看the documentation。您的代码看起来像

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提取字符串值-这可能会或可能不会在您的特定浏览器中实现，有关更多详细信息，请参见 here。