d3追加簡單區域

-1

我想將簡單區域附加到我的圖表，並將面積值的終點作爲常量。d3追加簡單區域

percentArea = d3.svg.area() 
     .interpolate('linear') 
     .x0(0) 
     .x1(w) 
     .y0(h/4) 
     .y1(h);

我想直接追加這個區域並給它一個顏色填充。感謝幫助。我正在特別努力地嘗試獲得區域填充。圖表顯示了該區域的一條線，但是當我嘗試時沒有填充。

編輯：試圖讓問題更清楚明確：我面對的問題只有當我嘗試調用我的函數而不傳遞數據。當我調用percentArea（數據）時，區域填充按預期工作。然而，我無法理解爲什麼當我的地區的端點不變時我必須傳遞數據。

2015-09-13 hunters30

我不希望將此稱爲percentArea（data），因爲端點是固定的，所以傳遞數據似乎是錯誤的。 – hunters30

'.style（「fill」，color）' –

當我使用append（「path」）。attr（「d」，percentArea（data））.style（「fill」，color）時，它是有效的。任何建議請改善我稱之爲的方式？或者，即使端點不變，這是唯一的方法嗎？ – hunters30

您需要確保您已渲染的路徑正在填充。有兩種方法可以做到這一點：

設置的樣式

path.style("fill", "steelblue");

設置一個類，並充分利用CSS

path.attr("class", "filled-area"); 

// In CSS 
.filled-area { 
    fill: steelblue; 
}

這裏有一個簡單的例子：

帶筆畫的面積圖：

面積圖，無填充

正如你可以看到這個默認的黑色

面積圖與正確填寫

來源

2015-09-14 19:09:11 Ian

我的問題被誤解了。然而，你已經回答相應的謝謝。當我嘗試將區域添加到svg而不傳遞任何數據時，我遇到了區域填充問題。當我將區域函數稱爲百分比區域（數據）時，您建議的方式起作用。但是我不明白爲什麼我必須傳遞數據，即使我的終點不變。 – hunters30

@ hunters30：告訴你什麼 - 用一個我可以運行的例子問一個問題（把一個鏈接作爲這個問題的評論），然後我會看一看。 – Ian

好吧提出了一個新的問題，並試圖更具體。另外加一個小提琴來展示我的問題。 [鏈接]（http://stackoverflow.com/questions/32572800/d3-append-a-svg-with-constant-area） – hunters30

回答