需要帮助绘制多元线之间的区域 - 而不是从轴到线

Question

我是 d3.js 的新手，我正在努力填充多变量百分位数图中线之间的区域。

• 我不希望在最底线下方或最顶线上方填充任何区域。
• 第一列将始终位于图表底部（第 5 个百分位）
• 最后一列将始终位于图表顶部（第 95 个百分位）
• 我需要在每行之间单独的区域段

我知道我需要在 (y0, y1) 之间定义一个填充区域，如下所示：

var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(BOTTOM); })
.y1(function(d) { return y(TOP); });

但是我不知道该为 .y1 部分添加什么。理想情况下，我只是获取 TSV 中下一行的下一个值，但我不知道如何正确执行此操作。

出于测试目的，我有以下创建我需要的区域段之一：

.y0(function(d) { return y(+d.p05); })
.y1(function(d) { return y(+d.p25); });

---

我想要这样的东西，但这个例子没有帮助，因为它没有引用来自 csv/tsv 的不同行：

http://bl.ocks.org/mbostock/4060954

这个类似，但它是双变量的，而不是多变量的。

http://bl.ocks.org/mbostock/3894205

---

这是我正在进行的工作（查看源代码）：

http://artfuladvection.com/project/NOAA/percentilesGraph/multipercentile.html

我的 TSV 设置如下：

date    p05 p25 p50 p75 p95
20140122    3   4   5   6   12
20140123    9   10  12  22  34
20140124    14  16  18  34  66

有什么帮助吗？

Answer 1

对于单个区域，代码如下所示。

var area = d3.svg.area()
  .x(function(d) { return x(d.date); })
  .y0(function(d) { return y(+d.p05); })
  .y1(function(d) { return y(+d.p25); });

per.append("g")
   .attr("class", "per")
   .append("path")
   .attr("class", "area")
   .attr("d", function (d) { return area(data); });

对于多个区域，您可以使用 color 刻度的域来循环遍历不同的值，就像您之前所做的那样。也就是说，上面的代码会像这样循环。

var values = color.domain();
for(var i = 0; i < values.length() - 1; i ++) {
  var area = d3.svg.area()
    .x(function(d) { return x(d.date); })
    .y0(function(d) { return y(+d[values[i]]); })
    .y1(function(d) { return y(+d[values[i+1]]); });

  per.append("g")
     .attr("class", "per-" + values[i])
     .append("path")
     .attr("class", "area-" + values[i])
     .attr("d", function (d) { return area(data); });
}