javascript - 路径可以在某个点有 2 种不同的填充颜色吗？

Question

我有一个面积图。

我希望它在沿 x 轴的某个点处更改填充颜色。

示例:如果某个值大于某个值，则从此时开始更改路径的填充颜色。

我一直在尝试以下方法:

.attr("fill", function (d, i) {
    if (d.timeFrom < d.beforePredictedDate ){
        d3.select(this).style("fill", function (d,i) { 
            return "purple"
        });
    }
    else{
        d3.select(this).style("fill", function (d,i) { 
            return "green"
        });
    }
}

理想的结果会产生能够实现以下目标的东西:

Answer 1

正如 Robert 所说，您可以使用在颜色边界处开始和结束的 linearGradient 进行填充。

<svg>
    <defs>
        <linearGradient id="grad">
            <stop offset="70%" stop-color="black"/>
            <stop offset="70%" stop-color="limegreen"/>
        </linearGradient>
    </defs>

    <circle cx="150" cy="75" r="75" fill="url(#grad)"/>
</svg>

但对于一般路径，找出渐变停止点的位置可能最终会很痛苦。因此，在大多数情况下，使用两条路径可能更简单、更好 - 正如 Robert 所说。