javascript - D3: 積み上げ棒グラフ - 棒に対して高さが大きすぎます

Question

カテゴリごとに 3 つの積み上げ棒グラフを含む D3 積み上げ棒グラフを作成しようとしています。各図に x、y、および y0 があるようにデータが正しくマッピングされているように見えますが、何らかの理由でバーの高さが非常に大きくなっています。私のフィドルでここを見ることができます：http://jsfiddle.net/RL_NewtoJS/MjD5S/3/

また、チャートを作成するコードは次のとおりです。

var marginTop = 10;
var marginBottom = 20;
var marginRight = 10;
var marginLeft = 20;
var height = 300 - marginTop - marginBottom;
var width = 170 - marginLeft - marginRight;
var parseDate = d3.time.format("%m/%Y").parse;

var svgSelection = d3.select('#chart1')
    .append("svg")
    .attr("width", width + marginLeft + marginRight)
    .attr("height", height + marginTop + marginBottom);

var baseGroup = svgSelection
    .append("g")
    .attr("transform", "translate("+marginLeft+","+marginTop+")");


var yScaleBar = d3.scale.linear()
    .range([height,0]); 

var xBarScale = d3.scale.ordinal()
    .rangeRoundBands([0, width], .0);

var colorScale = d3.scale.ordinal()
    .range(["darkblue", "blue", "lightblue"])


var yAxisBar = d3.svg.axis()
    .scale(yScaleBar)
    .tickSize(-width, 0, 0)
    .orient("left");        

var xBarAxis = d3.svg.axis()
    .scale(xBarScale)
    .ticks(4)
    .orient("bottom");


var dataset = [
    { apples: 5, oranges: 10, grapes: 22 },
    { apples: 4, oranges: 12, grapes: 28 },
    { apples: 2, oranges: 19, grapes: 32 },
    { apples: 7, oranges: 23, grapes: 35 },
    { apples: 23, oranges: 17, grapes: 43 }
];

// each key (fruit), uses a map to create all the objects for that fruit
// i in the anonymous function passed to map is the index of the dataset array, so can be used as the ID
var newDataset = ["apples", "oranges", "grapes"].map(function(n){
    return dataset.map(function(d, i){
           return { x: i, y: d[n] };
       });
});

d3.layout.stack()(newDataset);



yScaleBar.domain([0, d3.max(newDataset[newDataset.length - 1], function(d) { return d.y0 + d.y; })]);
xBarScale.domain(d3.range(dataset.length));


 // Add a group for each fruit
 var valgroup = baseGroup.selectAll("g.valgroup")
        .data(newDataset)
        .enter()
        .append("g")
        .attr("class", "valgroup")
        .style("fill", function(d, i) { return colorScale(i); });


baseGroup.append("g")
      .attr("class", "xaxis")
      .attr("transform", "translate(0," + height + ")")
      .call(xBarAxis);            


baseGroup.append("g")
      .attr("class", "yaxis")
      .call(yAxisBar); 


 // Add a rect for each date.
 var rect = valgroup.selectAll("rect")
        .data(Object)
        .enter()
        .append("rect")
        .attr("x", function(d) { return xBarScale(d.x); })
        .attr("y", function(d) { return yScaleBar(d.y0) - yScaleBar(d.y); })
        .attr("height", function(d) { return yScaleBar(d.y); })
        .attr("width", xBarScale.rangeBand());