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

Question

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

如何做到这一点？

Answer 1

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

Answer 2

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

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

在任何一种情况下，您都必须计算线条交叉的点数。如果您的行被指定为函数，这对于某些代数来说很容易。如果你只有点并希望在它们之间进行插值，那就有点棘手了。

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