d3.js yaxis not drawing all the ticks properly

匿名 (未验证) 提交于 2019-12-03 02:33:02

问题:

I have a datastructure like

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

I try to draw a yaxis using the name and the value column using two different yaxis components. However, it appears that the value yaxis is missing one of the the last value (I get 4 ticks for the "name" yaxis labels and 3 ticks for the "value" yaxis labels). See the following fiddle:

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

回答1:

It does not draw 3 ticks, as you say. Axis component uses interpolation. The component works as expected, you are just not using it right. You should have individual labels on top of bars. Try changing the values like in this fiddle: http://jsfiddle.net/AmHhg/81/

Since the axis component interpolates between values, if you have the same value twice (bars 2 and 3) it makes sense it's displayed only once...

In the first case (first bar) the bar is changing it's value so we don't actually see it when we have the same value...

Read more about axis here: https://github.com/mbostock/d3/wiki/SVG-Axes. Also try to look at Bob Monteverde's NVD3 axis components.

To fix this: if you do not actually want to use axis but rather labels, just add labels on top of each bar instead of having them displayed automatically like in the bar tutorials from Mike Bostock and Scott Murray (alignedleft).



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!