d3.js y轴没有正确绘制所有刻度

时间:2012-08-27 19:17:59

标签: javascript d3.js

我有一个像

这样的数据结构
[{ name: "a", value: 5000},
{ name: "b", value: 6000},
{ name: "c", value: 7000},
{ name: "d", value: 4000}]

我尝试使用两个不同的yaxis组件使用名称和值列绘制yaxis。但是,似乎值yaxis缺少最后一个值之一(我为“名称”yaxis标签获得4个滴答,为“值”yaxis标签获得3个滴答)。请参阅以下小提琴:

http://jsfiddle.net/namit101/AmHhg/73/

1 个答案:

答案 0 :(得分:2)

正如你所说,它不会绘制3个刻度。轴组件使用插值。该组件按预期工作,您只是没有正确使用它。您应该在条形图上方放置单独的标签。尝试更改此小提琴中的值:http://jsfiddle.net/AmHhg/81/

由于轴组件在值之间进行插值,如果你有两次相同的值(第2栏和第3栏),那么它只显示一次......

在第一种情况下(第一个条形图),条形图正在改变它的值,所以当我们具有相同的值时,我们实际上看不到它...

在此处详细了解轴:https://github.com/mbostock/d3/wiki/SVG-Axes。 还试着看看Bob Monteverde的NVD3轴组件。

要解决此问题:如果您实际上不想使用轴而是使用标签,只需在每个条形图的顶部添加标签,而不是像Mike Bostock和Scott Murray(alignedleft)的条形教程中那样自动显示它们。 / p>