新手d3堆积面积图

Question

为一个可能很简单的 Q 道歉。 我在这里查看了示例页面：http://bl.ocks.org/mbostock/3885211# 然后我修改了该行：

d3.tsv("data.tsv", function(error, data) {

成为

d3.csv("data.csv", function(error, data) {

指向包含内容的数据文件：

date,Kermit,piggy,Gonzo,fuzzy,hogthrob,animal,floyd,Gabriel,Beaker,scooter,statler,waldorf,slim,sam
13-Oct-31,113.44,435.15,19.57,60.55,53.02,268.28,87.34,1.98,0,31.68,0,21.59,4.82,11.31
13-Nov-30,109.86,506.85,18.97,58.77,388.37,131.48,85.34,1.98,0,48.50,0,21.59,4.70,11.31
13-Dec-31,113.46,644.88,19.57,60.57,669.47,0,87.46,1.98,0,80.97,0,21.59,4.82,11.43

刷新浏览器时，x 轴和日期显示正确，但仅绘制了一个数据点（对于 Kermit），就好像它是图表上唯一的条形一样。

有人能指出我正确的方向吗？作为一个完整的 d3 新手，我们将不胜感激。

Answer 1

问题是Stacked Area Chart 中数据的每一行总和为 100。但是，您的数据在每一行中总和为不同的值，'Kermit' 的值对于每个日期都是 >100。因此，当 D3 为您的数据集绘制所有路径时，它们不在图的范围内。

要解决此问题，您需要初始化 y 轴的 domain，因此默认情况下您的值不会在 [1, 100] 的范围内。初始化x轴域后可以添加以下内容：

// Find the value of the day with highest total value
var maxDateVal = d3.max(data, function(d){
  var vals = d3.keys(d).map(function(key){ return key !== "date" ? d[key] : 0 });
  return d3.sum(vals);
});

// Set domains for axes
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, maxDateVal])

您需要进行的唯一其他更改是通过进行此更改来停止规范化您的数据

return {date: d.date, y: d[name] * 1}; /// 100};

并注释掉将 y 轴上的文本格式化为百分比的行：

var parseDate = d3.time.format("%y-%b-%d").parse;
    //formatPercent = d3.format(".0%");
.
.
.
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    //.tickFormat(formatPercent);

在bl.ock查看完整示例。

进行这些更改后，我得到以下图表：