javascript - 積み上げ面グラフを作ってみた

Question

4 つのカテゴリを含むスタック エリア チャートを作成しようとしていますが、すべて合計すると 100 になります。しかし、それらは完全にチャートから外れています。ここに私のフィドルがあります：http://jsfiddle.net/RL_NewtoJS/9rCWG/

ここにもコードがあります

var marginTop = 10;
var marginBottom = 20;
var marginRight = 15;
var marginLeft = 30;
var height = 280 - marginTop - marginBottom;
var width = 480 - marginLeft - marginRight;

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 yScale = d3.scale.linear()
    .range([height,0])
    .domain([0,100]);   


var xScale = d3.time.scale()
    .range([0, width]);

var colorScale = d3.scale.ordinal()
    .range(["#4C82C3", "#F37B6D", "#6CC071", "#FFD900"]);

var hoverLabel = d3.scale.ordinal()
    .range(["age1", "age2", "age3", "age4"]);


var yAxis = d3.svg.axis()
    .scale(yScale)
    .tickSize(-width, 0, 0)
    .ticks(5)
    .tickFormat(function(d){if(d==100){return d +"%";}else{return d}})
    .orient("left");


var xBar = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

var dataset = [
    { year: "2000", age1: 31, age2: 10, age3: 32, age4: 27 },
    { year: "2001", age1: 32, age2: 12, age3: 30, age4: 26 },
    { year: "2002", age1: 24, age2: 19, age3: 32, age4: 25 },
    { year: "2003", age1: 26, age2: 18, age3: 31, age4: 25 },
    { year: "2004", age1: 22, age2: 17, age3: 34, age4: 27 },
    { year: "2004", age1: 24, age2: 17, age3: 33, age4: 26 },
    { year: "2006", age1: 31, age2: 15, age3: 32, age4: 22 },
    { year: "2007", age1: 30, age2: 15, age3: 35, age4: 20 },
    { year: "2008", age1: 27, age2: 18, age3: 31, age4: 24 },
    { year: "2009", age1: 25, age2: 15, age3: 35, age4: 25 },
    { year: "2010", age1: 34, age2: 12, age3: 33, age4: 21 },
    { year: "2011", age1: 31, age2: 14, age3: 32, age4: 23 },
    { year: "2012", age1: 27, age2: 18, age3: 30, age4: 25 },
    { year: "2013", age1: 25, age2: 20, age3: 35, age4: 20 }
];

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

d3.layout.stack()(newDataset);

console.log(newDataset);

var parseDate = d3.time.format("%Y").parse;

dataset.forEach(function(d) {
    d.year = parseDate(d.year);
}); 

xScale.domain(d3.extent(dataset, function(d) { return d.year }))

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

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


var area = d3.svg.area()
    .x(function(d) { return xScale(d.x); })
    .y0(function(d) { return yScale(d.y); })
    .y1(function(d) { return yScale(d.y + d.y0); });

var ageGroup = baseGroup.selectAll(".valgroup")
    .data(newDataset)
    .enter()
    .append("g")
    .attr("class", "valgroup")
    .style("fill", function(d, i) { return colorScale(i); })
    .attr("class", function(d, i) { return hoverLabel(i); });

ageGroup.append("path")
    .attr("d", function(d) { return area(d); });