d3 追加簡單區域

Question

我想將簡單的面積附加到我的圖表中，並將面積值的端點作為常量。

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

我想直接附加這個區域並給它一個顏色填充。 感謝幫助。 我在嘗試填充區域時特別困難。 該圖表在該區域上顯示一條線，但在我嘗試時沒有填充。

編輯：試圖使問題更加清晰和具體：我面臨的問題僅是當我嘗試在不傳遞數據的情況下調用我的函數時。 當我調用percentArea(data) 時，區域填充按預期工作。 但是，當我的區域的端點不變時，我無法理解為什么我必須傳遞數據。

Answer 1

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

設置樣式

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

設置一個類並利用 CSS

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

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

這是一個快速示例：

帶筆划的面積圖：

沒有填充的面積圖

如您所見，默認為黑色

正確填充的面積圖