D3.JS 创建堆积面积图答案

【问题标题】：D3.JS to create a Stacked Area ChartD3.JS 创建堆积面积图
【发布时间】：2018-06-17 09:24:15
【问题描述】：

我正在尝试复制以下 Stacked Area Chart，它于 2018 年 1 月 5 日更新。

为了做到这一点，需要有一个 index.html，其中包含提供的代码，以及一个 data.tsv，其中包含要显示的数据。

index.html 如下所示：

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom;

var parseDate = d3.timeParse("%Y %b %d");

var x = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
    z = d3.scaleOrdinal(d3.schemeCategory10);

var stack = d3.stack();

var area = d3.area()
    .x(function(d, i) { return x(d.data.date); })
    .y0(function(d) { return y(d[0]); })
    .y1(function(d) { return y(d[1]); });

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", type, function(error, data) {
  if (error) throw error;

  var keys = data.columns.slice(1);

  x.domain(d3.extent(data, function(d) { return d.date; }));
  z.domain(keys);
  stack.keys(keys);

  var layer = g.selectAll(".layer")
    .data(stack(data))
    .enter().append("g")
      .attr("class", "layer");

  layer.append("path")
      .attr("class", "area")
      .style("fill", function(d) { return z(d.key); })
      .attr("d", area);

  layer.filter(function(d) { return d[d.length - 1][1] - d[d.length - 1][0] > 0.01; })
    .append("text")
      .attr("x", width - 6)
      .attr("y", function(d) { return y((d[d.length - 1][0] + d[d.length - 1][1]) / 2); })
      .attr("dy", ".35em")
      .style("font", "10px sans-serif")
      .style("text-anchor", "end")
      .text(function(d) { return d.key; });

  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y).ticks(10, "%"));
});

function type(d, i, columns) {
  d.date = parseDate(d.date);
  for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = d[columns[i]] / 100;
  return d;
}

</script>

data.tsv 可以在下一张图片中部分看到（它与Stacked Area Chart 中的图片完全相同）：

获得这些文件后，只需将它们上传到服务器中的特定位置 (home/knocktorius/data.knocktorius.com) 并希望看到它正常工作。

这是我得到的结果：

如何解决这个问题，让它看起来像链接中的那个？

我已经尝试过以下方法：

使用 .csv 而不是 .tsv，相应地更改代码（获得结果相同）；
从

//d3js.org/d3.v4.min.js

到

http://d3js.org/d3.v4.min.js

创建一个不同的 .tsv 文件，其中包含不同的数据并相应地更改代码。结果完全一样。
更改different technique 与不同的数据集（还有.tsv），看看问题是否仍然存在。结果是一样的，显示的是坐标轴而不是数据。
检查错误日志。出现的错误是：

AH01276: 无法提供目录 /home/knocktorius/public_html/: 没有匹配的 DirectoryIndex (index.php,index.php5,index.php4,index.php3,index.perl,index‌.pl,index.plx,index .‌ppl,index.cgi,index.‌jsp,index.js,index.j‌p,index.phtml,index.‌shtml,index.xhtml,in‌dex.html,index.htm,i‌ ndex.wml,Default.htm‌l,Default.htm,defaul‌t.html,default.htm,h‌ome.html,home.htm) 找到，并且服务器生成的目录索引被选项指令禁止
检查控制台，在网络下，它会显示带有正确数据的文件 data.tsv，如下图所示：
1. 创建与以前不同的域关联的不同子域。控制台日志中没有错误，并且出现相同的结果：可以看到轴并且它没有填充数据。
2. 使用带有 JSON 数据的 different technique。结果很好：

这次我将使用堆积面积图，这是我从一开始的目标，将数据传递给 JSON 并进行所需的代码修改。

随时通知您。

【问题讨论】：

请不要发布文本图像，而是发布纯文本。关于您的问题：您使用的是网络服务器吗？
是的，刚刚创建了一个子域并进行了FTP。因此对于Wappalizer，Web服务器是Nginx
控制台有错误吗？另外，如果您在d3.tsv 回调中执行console.log(data)，您会看到正确的数据吗？
只有这个：AH01276：无法提供目录 /home/knocktorius/public_html/：没有匹配的 DirectoryIndex (index.php,index.php5,index.php4,index.php3,index.perl,index .pl,index.plx,index.ppl,index.cgi,index.jsp,index.js,index.jp,index.phtml,index.shtml,index.xhtml,index.html,index.htm,index.wml ,Default.html,Default.htm,default.html,default.htm,home.html,home.htm) 找到，并且服务器生成的目录索引被选项指令禁止
如果您遇到错误，请编辑您的问题添加它，以便其他用户可以帮助您。

标签： javascript d3.js svg charts

【解决方案1】：

使其工作的方法是下载d3.v4.min.js from its location 并相应地更改index.html：

<script src="http://d3js.org/d3.v4.min.js"></script>

到：

<script src="d3.v4.min.js"></script>

结果如下：

【讨论】：