Height transitions go from top down, rather than from bottom up in D3

user_1175276 0
Viewed 3328

I'm making a bar chart with the following code:

svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) {
        return x(d.value) - barWidth / 2;
    })
    .attr("width", barWidth)
    .attr("y", function(d) {
        return y(d.frequency);
    })
    //.attr("height", 0)
    //.transition()
    .attr("height", function(d) {
        return height - y(d.frequency);
    });

If I add the commented-out lines, then the bar transitions from height 0 to its proper height; however, for some reason instead of "growing" up from the x-axis, the bars start out at their highest values, and "grow" down towards the x-axis. Why is this happening? How can I fix this?

d3.js svg javascript
4 Answers

A thing that was counter intuitive and caused me to create some upside down graphs is the svg coordinates x,y start 0,0 at the top left corner, rather than the bottom left corner.

user_7380480
Related