score:0

Since the values are dynamically appended it is better to use y-axis for the values.

score:1

You should be more accurate with your "height/x/y" manipulations :)

D3 uses coordinate space where x=0 and y=0 coordinates fall on the bottom left.

I've changed some of your code: svg.selectAll("bar") .data(data) .enter().append("rect") .style("fill", "steelblue") .attr("x",function(d) { return x(d.value); }) .attr("width", y.rangeBand()) .attr("y", function(d) { return height - y(d.date); }) .attr("height", function(d) { return y(d.date); }) .attr("title",function(d) { return y(d.value); }); and I've got the result enter image description here Bars are in the right places. I believe you can figure out with titles by your own, if no - you know what to do

ps: http://jsfiddle.net/om42ts61/


Related Query

More Query from same tag