需要幫助多元線之間的繪圖區域 - 不是從軸線到線條

Question

我是d3.js的新手，我正在努力填寫多變量百分比圖表中的線條之間的區域。

• 我不希望任何區域填充在最底部最低行或最高行以下。
• 第一列將總是在圖形的底部（第五百分位）
• 最後一列將始終是在圖的頂部（第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 
2014
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); }); 
}