帶有不規則閾值字段的折線圖/圖形

Question

想要在背景中創建帶有不規則彩色閾值字段的條形圖，以便每個數據點都有其自己的一組最小/最大閾值，最終會看起來像像這樣：http://dcalvitti.webs.com/plant/SAMPLE.png

看着D3的例子像這樣的：http://bl.ocks.org/mbostock/4062844

可後者的例子來操作看起來更像我創建的圖像？

預先感謝..

Answer 1

在樣本圖像中示出的曲線圖實際上比鏈接例子更容易;爲此，您不需要創建剪切路徑，也不需要使用兩種不同顏色繪製線條兩次。

要繪製彩色背景，請使用由d3.svg.area()創建的區域路徑生成器。設置y0訪問器函數爲您的數據數組中的每個點提取最小值，並提取最大值的y1訪問器函數。

然後用d3.svg.line()路徑生成器將該線繪製爲法線圖。

工作示例，適合於在評論從小提琴：http://jsfiddle.net/h45CD/12/
（注：我註釋掉的數據集的一半，因爲重複的「年」的價值觀，不知道這是應該代表）

關鍵代碼：

// Define the value line path generator 
var line = d3.svg.line()       
    .x(function(d) { return x(d.year); }) 
    .y(function(d) { return y(d.temp); }); 

// Define the area path generator 
var area = d3.svg.area() 
    .x( function(d) { return x(d.year); }) 
    .y0(function(d) { return y(d.min); }) 
    .y1(function(d) { return y(d.max); }); 

/* ... */ 

// Add the background area showing the historic range 
svg.append("path") 
    .datum(data) 
    .attr("class", "historicRange") 
    .attr("d", area); 

// Add the value line 
svg.append("path") 
    .datum(data) 
    .attr("class", "dataline") 
    .attr("d", line); 

---

編輯基於評論

如果做想改變顏色取決於歷史價值，而不是凌駕背景範圍繪製的線一條線，最直接的解決辦法可能是創建一個<pattern>元素組成，不同顏色的地區，並用它來撫摸價值線。

您將需要熟悉模式元素的不同選項。 This MDN tutorial有一個很好的介紹，或者你可以潛入full W3 specs。

對於這種情況，我們希望模式的大小和位置相對於用於繪製直線的座標系統，而不管直線本身的大小或形狀如何。這意味着我們將設置patternUnits和patternContentUnits爲userSpaceOnUse。圖案的height和width將是繪圖區域的高度和寬度。

在模式中，我們將繪製代表最大最小範圍的區域，但我們還需要繪製不同顏色的單獨區域，其中值高於最大值且低於最小值。我們可以爲每個使用相同的面積發生器，但每次都需要更改y0/y1訪問器函數。

關鍵代碼：

// Add the pattern showing the historic range 
var pattern = defs.append("pattern") 
    .datum(data) //add the data to the <pattern> element 
       //so it will be inherited by each <path> we append 
    .attr({ 
     "patternUnits":"userSpaceOnUse", 
     "patternContentUnits":"userSpaceOnUse", 
     "width": width, 
     "height": height 
    }) 
    .attr("id", "strokePattern"); 

pattern.append("path") 
    .attr("class", "historicRange between") 
    .attr("d", area); 

pattern.append("path") 
    .attr("class", "historicRange above") 
    .attr("d", area.y1(0) 
        .y0(function(d){return y(d.max);}) 
     ); 

pattern.append("path") 
    .attr("class", "historicRange below") 
    .attr("d", area.y1(function(d){return y(d.min);} ) 
        .y0(height) 
     ); 

// Add the value line 
plot.append("path")    
    .datum(data)    
    .attr("class", "dataline") 
    .attr("d", line) 
    .style("stroke", "url(#strokePattern)");   

工作例如：http://jsfiddle.net/h45CD/14/

Answer 2

我包括基於AMCharts，並與該網站的創始人的幫助下通過自己撰寫的圖表網頁鏈接。包含上述的問題，更多的幾個例子..

http://dcalvitti.webs.com/SAMPLE/NEWWEBINDEX.html

提供仍在製作的圖表。例如，AMcharts確實有一個函數，可以將線條的顏色限制在某個我不知道的特定值之上/之下，因此仍有工作要做。我花了很多周在圖表上，想我會分享。我敢肯定有人會在這裏找到新的東西...