2

我是 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

有什么帮助吗？

4

1 回答 1

2

对于单个区域，代码看起来像这样。

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); });
}
于 2014-01-22T21:36:00.577 回答