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

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); });
}