Question

我正在尝试制作一个包含4个类别的堆栈区域图表，所有类别都加起来为100。看起来我已经映射了我的数据，因此newDataset数组中有x，y，y0值但是阴影区域正在绘制，但它们完全不在图表中。这是我的小提琴：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); });

Answer 1

您的代码存在两个问题。（请注意，您发布的代码和小提琴中的代码略有不同，因此我将在您的帖子中删除代码。）

而不是使用数组索引i作为x值：
```
return { x: i, y: d[n] }; // before
```
您应该使用year代替。您还需要明确地将y0值设置为0，这可以在创建newDataset时轻松完成：
```
return { x: d.year, y: d[n], y0: 0 }; // after
```

您需要在创建newDataset之前解析年份，即它应按此顺序排列：

// convert years to dates (needs to happen before creating new dataset) var parseDate = d3.time.format("%Y").parse; dataset.forEach(function(d) { d.year = parseDate(d.year); }); // 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){ // use year instead of array index i return { x: d.year, y: d[n], y0: 0 }; }); });

Here's a working JSFiddle和截图：

试图制作堆积区域图表

1 个答案: