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是字符串，则不会绘制任何内容。

我还尝试过使用序数而不是线性，但这会得到不正确的图表。（看起来像奇怪的线条...）

- Vincent Hogendoorn

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

- Lars Kotthoff

---

谢谢您的回应，我知道我需要一个序数比例尺，但这会产生一个奇怪的图表..（循环线等）。但是我使用了范围而不是rangeRoundBands。所以这解决了问题，（现在我只有一个小问题，就是点和x轴不在同一水平线上。（有一些可见的偏移））。 - Vincent Hogendoorn

我在想为什么要使用rangeRoundBands而不是rangeBands？似乎是为了避免锯齿状的伪像，但不确定是否还有其他原因。谢谢。 - yoyodunno

那是唯一的原因。 - Lars Kotthoff

Answer 2

使用

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

Here is Fiddle Link http://jsfiddle.net/sk2Cf/

- gunjan

---

谢谢您的回复。问题已经通过上面的解决方案解决了，但是您提供的这个解决方案也有效。我会记住这个的。 - Vincent Hogendoorn

谢谢！无法想象有比这更优雅的解决方案了。 - ATP

我刚发现了这个问题并尝试了一下代码，但它与我当前代码中存在的问题相同：图表的x位置与x比例尺标签的x位置不同。如果您删除插值，您会更清楚地看到它。线的x位置是条形图的左上角位置。 - JayTheKay