新手d3堆积区域图

Question

很多道歉可能很简单。 我在这里查看了示例页面：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'的值为{{1}对于每个日期。因此，当D3绘制数据集的所有路径时，它们不在图形的范围内。

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

[1, 100]

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

// 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])

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

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

请参阅此bl.ock的完整示例。

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