使用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; });