D3 is not working properly
Well I'm starting with D3 and I'm trying to create a vertical bar chart.
I don't really know what's going on, but some things don't work as expected for me (maybe because I'm just a noob about this).
I use linear scales, it works well with axes, but it calculates the height of the bars, for example, higher values are not displayed (due to the low value of the result).
I used d3.max to define the range. I really don't understand what's going on.
var yScaleLeft = d3.scale.linear()
.domain([0, d3.max(stats)])
.range([realHeight, 0]);
.attr("height", function(d) {
return yScaleLeft(d);
});
Here is the code: http://jsfiddle.net/aKhhb/ Look at * Scales * and // Stats bars
(Just forget about x-aligning the bars, I will see that later, I want to set its height correctly)
Thank you so much! Y saludos desde Chile :)
source to share
The problem is that your input and output ranges are mirrored, i.e. the largest input value matches the smallest output value. This is good, but you should take this into account when calculating the y
and attributes height
. Basically, you had calculations for both sides.
Fixed violin here . I also fixed the x-axis by adding margin and half the stroke width to the calculated x positions. Oh, and you don't need to parseInt()
when doing calculations, only when you really want to parse an integer from a string.
source to share