D3折线图字符串域x轴答案

【问题标题】：D3 linechart string domain x-axisD3折线图字符串域x轴
【发布时间】：2013-03-12 02:46:23
【问题描述】：

我对 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 是一个字符串，它不会绘制任何东西。

我也尝试过使用序数而不是线性，但这给出了一个不正确的图表。（奇怪的线条......）。

【问题讨论】：

标签： d3.js axis linechart ordinal

【解决方案1】：

如果要在轴上使用分类值，则需要分类（序数）刻度。看看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 了解更多详细信息。

【讨论】：

谢谢你的反应，我知道我需要一个序数比例，但这给出了一个如此奇怪的图表..（循环线等）。但我使用范围而不是 rangeRoundBands。所以这解决了这个问题，（现在我只有一点问题，点和 xaxis 不在同一水平上。（有一些可见的移位））。
我想知道为什么使用 rangeRoundBands 而不是 rangeBands？似乎它避免了抗锯齿伪影，但不确定您是否有其他原因使用它。谢谢。
这是唯一的原因。

【解决方案2】：

使用

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

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

【讨论】：

感谢您的反应。上面的解决方案已经解决了，但是您提供的这个解决方案也有效。我会记住这一点的。
谢谢！无法想象更优雅的解决方案。
我刚刚发现这个问题并尝试了小提琴，但它与我目前在我的代码中遇到的问题相同：图形的x位置与x位置不同x 尺度标签。如果删除插值，您可以更好地看到它。线条的 x 位置是条形图的左上角位置（如果它是条形图）。