CODEWITHSUNDEEP
javascriptd3.js
user1167650
user1167650

Reputation: 3207

d3.js yaxis not drawing all the ticks properly

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/

Upvotes: 1

Views: 3218

Answers (1)

paxRoman
paxRoman

Reputation: 2062

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

Upvotes: 2

Related Questions