d3.js yaxis没有正确绘制所有记号

d3.js yaxis not drawing all the ticks properly

本文关键字：绘制 有记号 js yaxis d3      更新时间：2023-09-26

我有一个类似的数据结构

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

我尝试使用名称和值列绘制一个Y轴，使用两个不同的Y轴组件。然而，值yaxis似乎缺少最后一个值中的一个（"名称"yaxis标签有4个刻度，"值"yaxix标签有3个刻度）。参见以下小提琴：

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

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

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

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

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

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

相关文章：