Question

I’ve modified the data structure from the example
d3.js yaxis not drawing all the ticks properly into

       [{name: "john",value: 4500},
        {name: "peter",value: 3000},
        {name: "tom",value: 2500},
        {name: "john",value:2000}];

When the chart is drawn, the 4th name i.e 2nd john doesn’t appear in the chart,
why this behavior and how can i make it to appear in the chart

here is the foddle for it http://jsfiddle.net/hyder/pFEEW/

Answer 1

If you look closely, you’ll see that the bars for the first and the fourth items are drawn at the same positions and overlap.

The fundamental problem is that the code is using the data itself (which is duplicated) to identify individual elements. If you want to have different elements with the same data values, you’ll need to give them unique identifiers so that the code is able to distinguish between them. The scales in the code are set up such that the same input value will map to the same output value, i.e. if you have the same name, the bars will be drawn at the same position.

One way of solving this problem would be to use a unique ID as input to the scale functions and then a formatter to make the labels from this ID.