在React Native中使用D3的自定义图表

Question

我的要求ID（如下面在react native中所示）绘制图表。

在我的研究中，我发现d3是创建图形的最合适工具。

添加的数据集如下所示，它与react native完美配合。

任何想法我该如何使数据集具有如下所示的彩色（当涉及到不同区域时，颜色就会改变）。

Answer 1

我遵循了Mark链接的方框中提到的方法。

1. 定义色标
2. 定义一个要在其上阴影的线/面的值数组
3. 将这些值转换为基于高度的百分比，并使用这些百分比应用线性渐变
4. 对路径和面积使用相同的比例

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

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