d3.js yaxis 未正确绘制所有刻度

Question

我有一个像

这样的数据结构

[{ name: "a", value: 5000},
{ name: "b", value: 6000},
{ name: "c", value: 7000},
{ name: "d", value: 4000}]

我尝试使用 name 和 value 列使用两个不同的 yaxis 组件绘制 yaxis。但是，值 yaxis 似乎缺少最后一个值之一（“名称”yaxis 标签有 4 个刻度，“值”yaxis 标签有 3 个刻度）。请参阅以下小提琴：

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

Answer 1

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

由于轴组件在值之间进行插值，如果您有两次相同的值（第 2 和第 3 条），那么它只显示一次是有意义的......

在第一种情况下（第一个栏），栏正在改变它的值，所以当我们有相同的值时我们实际上看不到它...

在此处阅读有关轴的更多信息：https://github.com/mbostock/d3/wiki/SVG-Axes。 还可以尝试查看 Bob Monteverde 的 NVD3 轴组件。

要解决此问题：如果您实际上不想使用轴而是使用标签，只需在每个条形顶部添加标签，而不是像 Mike Bostock 和 Scott Murray（左对齐）的条形教程中那样让它们自动显示。