d3.js yaxis not drawing all the ticks properly

Question

I have a datastructure like

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

Answer 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).