Question

我试图重现以下Stacked Area Chart，该更新于2018年1月5日更新。

为了做到这一点，需要提供带有代码的 index.html ，以及包含要显示的数据的 data.tsv 。< / p>

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文件并相应地更改代码。结果完全相同。
更改具有不同数据集（但也包括.tsv）的different technique，并查看问题是否仍然存在。结果相同，显示轴但不显示数据。
检查错误日志。出现的错误是：

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，在dex.html，index.htm的，我找到ndex.wml，Default.htm l，Default.htm，defaul t.html，default.htm，h ome.html，home.htm），以及由Options指令禁止的服务器生成的目录索引
检查控制台，在网络下，它会显示带有正确数据的文件data.tsv，如下图所示：
1. 创建与之前不同的域关联的其他子域。控制台日志中没有错误，并显示相同的结果：可以看到轴，并且它没有填充数据。
2. 使用带有JSON数据的different technique。结果很好：

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

让你发布。

Answer 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>

结果如下：

D3.JS创建堆积面积图

1 个答案: