在react native中使用d3定制图表

我采用了马克链接的块中提到的方法。

1. 定义色阶
2. 定义要对其上的线/区域进行着色的值数组
3. 将这些值转换为基于高度的百分比,并使用这些百分比应用线性渐变
4. 对路径和区域使用相同的比例

Here 是指向我创建的示例的链接。

首先更改线条的笔划样式

.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; });