D3线图字符串域X轴

我相对较新的D3，我不明白为什么有些东西不工作.. 我想绘制一个线图与D3，这工作正常，但我有轴的问题。D3线图字符串域X轴

用下面的代码它去什么地方错了，我不知道如何解决......

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

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

希望有人能帮助我。

来源

2013-03-22 Vincent Hogendoorn

如果要在轴上使用分类值，则需要使用分类（顺序）比例。看看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了解更多详情。

来源

2013-03-22 14:53:03

感谢名单给你的反应，我知道我需要一个有序的规模，但是这给了这样一个奇怪的图表。（循环线等）。但我使用范围而不是rangeRoundBands。所以这解决了这个问题，（现在我只有一点问题，即点和x轴不在同一水平线上（有一些移位可见））。 – 2013-03-25 08:27:04

我想知道为什么使用rangeRoundBands而不是rangeBands？似乎它避免了抗锯齿工件，但不确定是否有其他原因使用它。谢谢。 – yoyodunno 2016-10-20 22:19:40

这是唯一的原因。 – 2016-10-20 22:20:55

使用

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

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

来源

2013-09-02 18:15:27 gunjan

感谢您的反馈。上面的解决方案已经解决了，但是您提供的这个解决方案也起作用。我会牢记这一点。 – 2013-09-03 14:38:35

谢谢！无法想象更优雅的解决方案。 – 2015-07-10 17:53:56

我刚刚发现了这个问题，并尝试了小提琴，但它与我目前在我的代码中存在的问题相同：图形的x位置与x尺度标签的x位置不同。如果删除插值，则可以更好地看到它。该线的x位置是条形图的左上角位置。 – kel 2015-11-03 19:17:41

D3线图字符串域X轴

回答

相关问题