y scale on d3 bar chart

Question

I am trying to build a stacked bar chart in d3.

Here's my jsfiddle: http://jsfiddle.net/maneesha/gwjkgruk/4/

I'm trying to fix it so that the y-axis starts at zero.

I thought this is where that was set up and this is how it should be:

yScale = d3.scale.linear()
    .domain([0, yMax])
    .range([0, height]),

but it doesn't work. Changing domain to this gets the scale right but messes up all my rects.

yScale = d3.scale.linear()
    .domain([yMax, 0])
    .range([0, height]),

What am I doing wrong?

Answer 1

Try to modify your scale like that:

yScale = d3.scale.linear()
  .domain([0,yMax])
  .range([height,0]),

and then when you fill the rect:

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