需要帮助绘制多变量线之间的面积 - 而不是从轴到线 [英] Need help plotting area between multivariate lines - not from axis to line

问题描述

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

• 我不想在最下面一行或最上面一行之上填充任何区域。
$ b $

• 最后一列将永远位于图表的顶部（第95百分位）
>

• 每行之间需要单独的区域段

我知道我需要定义一个区域（y0，y1）如下：

  var area = d3.svg.area（）
 .x （d）{return x（d.date）;}）
 .y0（function（d）{return y（BOTTOM）;}）
。 ）;}）; 
  

但是我不知道.y1部分要放什么。理想情况下，我只是抓住TSV下一行的下一个值，但我不知道如何正确地这样做。

为了测试的目的，我有以下创建我需要的区域段：

  .y0（function（d）{return y（+ d .p05）;}）
 .y1（function（d）{return y（+ d.p25）;}）; 
  

---

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

---

这是我的工作进度（查看源代码）：

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 
  

任何帮助？

解决方案

看起来像这样。

  var area = d3.svg.area（）
 .x（function {return x（d.date）; }）
 .y0（function（d）{return y（+ d.p25）;}）
。 
 
 per.append（g）
 .attr（class，per）
 .append（path）
 .attr class，area）
 .attr（d，function（d）{return area（data）;}）; 
  

对于多个区域，您可以使用 c $ c> scale to循环遍历不同的值，像你以前做过的。也就是说，上面的代码将在这样的循环中。

  var values = color.domain 
 for（var i = 0; i< values.length（） -  1; i ++）{
 var area = d3.svg.area（）
 .x d）{return x（d.date）;}）
 .y0（function（d）{return y（+ d [values [i]]）;}）
。 ）{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）;}）; 
} 
  




I'm brand new to d3.js, and I'm struggling to fill in the area between lines in a multivariate percentile graph.

• I don't want any area filled below the bottom most line, or above the top most line.
• The first column will always be at the bottom of the graph (5th percentile)
• The last column will always be at the top of the graph (95th percentile)
• I need separate area segments between each line

I know I need to define an area to fill between (y0, y1) like so:

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

However I can't figure out what to put in for the .y1 section. Ideally, I'd just grab the next value of the next row in the TSV, but I don't know how to do this properly.

For testing purposes, I have the following which creates ONE of the area segments I need:

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

---

I want something like this, but this example doesn't help since it isn't referencing a different row from a csv/tsv:

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

This one is similar, but its bivariate, not multivariate.

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

---

Here's my work in progress(view source):

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

My TSV is setup like this:

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

Any help?

解决方案

For a single area, the code would look something like this.

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

For multiple areas, you can use the domain of your color scale to loop over the different values like you have done before. That is, the code above would be in a loop like this.

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

这篇关于需要帮助绘制多变量线之间的面积 - 而不是从轴到线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！