使用d3自定義圖表

Question

我的要求是繪制一張圖表，如下圖所示。

在我的研究中，我發現d3是創建圖形的最佳工具。

像下面這樣添加了數據集，它與本機反應完美。

任何想法如何使數據集如下所示着色（當涉及不同區域時顏色發生變化）。

Answer 1

我按照Mark所鏈接的塊中提到的方法進行操作。

1. 定義色階
2. 定義要為其划分線條/區域的值數組
3. 根據高度將這些值轉換為百分比，並使用這些百分比應用線性漸變
4. 對路徑和區域使用相同的比例

這是我創建的示例的鏈接。

Answer 2

首先，更改線條的筆觸樣式

.line {
  fill: none;
  stroke: url(#temperature-gradient); // change here
  stroke-width: 1.5px;
}

然后添加temperature-gradient svg：

svg.append("linearGradient")
  .attr("id", "temperature-gradient")
  .attr("gradientUnits", "userSpaceOnUse")
  .attr("x1", 0).attr("y1", y(0)) // 0 as the min index
  .attr("x2", 0).attr("y2", y(500)) // 500 as the max index
.selectAll("stop")
  .data([
    {offset: "0%", color: "red"}, // red for low index
    {offset: "30%", color: "gray"},  // index 150 for grey color
    {offset: "100%", color: "stealblue"}   // to steal blue for index above 150
  ])
.enter().append("stop")
  .attr("offset", function(d) { return d.offset; })
  .attr("stop-color", function(d) { return d.color; });