d3.js - 给定两条任意插值曲线，根据相对值对它们进行着色

Question

我有两条曲线，每条曲线都是通过使用 d3.svg.line 对一组 (x,y) 值进行插值来定义的。我希望一条线在另一条线下方时为红色，在上方时为绿色。像这样：

如何才能做到这一点？

Answer 1

看看他们示例中的差异图表，它与您想要的非常相似，并且可能满足您的标准。如果不是，我想你可以很容易地适应它以满足你的需要。

Answer 2

这样做的主要问题是您不能直接为路径分配一种以上的颜色。所以你有两个主要选择。

• 将线分割成段。每个部分可以有不同的颜色。
• 使用渐变。颜色之间的过渡将是零宽度。

无论哪种情况，您都必须计算线与您自己交叉的点。如果你的线被指定为函数，这很容易用一些代数来完成。如果你只有点并且想要在它们之间进行插值，那就有点棘手了。

一旦有了线条交叉的点，只需相应地设置路径/渐变结束即可。