Histogram d3 upside down

Question

I have a simple diagram built in d3 with vertical columns: http://jsfiddle.net/philgyford/LjxaV/2/

However, he draws the bars down, and the baseline is at the top of the chart.

I read that to invert this, making up the bottom, I have to change range() along the y axis. So change this:

  .range([0, chart.style('height')]); 

:

  .range([chart.style('height'), 0]); 

However, it seems that he draws the inverse chart - draws in the space above each of the bars and leaves the stripes (bottom) transparent. What am I doing wrong?

Answer 1

In the base diagram d3: http://bl.ocks.org/mbostock/3885304

You are faithful in inverting the range.

In addition, your rectangles should be added as follows:

  .attr('y', function(d) { return y(d.percent); } ) .attr('height', function(d,i){ return height - y(d.percent); }); 

Answer 2

Setting the y attribute seems to work:

 .attr('y', function(d){ return (height - parseInt(y(d.percent))); }) 

jsfiddle here

Answer 3

The x and y coordinates for svg begin in the upper left corner. You want y to start at the bottom. The code below assumes you are adding some function line by line:

 svg.selectAll('rect') .data(dataset) .enter() .append('rect') 

To make the stroke chart act the way you want, set the y attribute to start at the distance data[i] above the axis:

 .attr('y', function(d) { return height - d; }) 

Then you have to make a distance, continuing the remaining data[i] along the axis.

 .attr('height', function(d) { return d; }) 

What is it!