路径可以在某个点上有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

正如罗伯特所说，你可以使用在颜色边界处开始和结束的线性颜色来进行填充。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

但是对于一般路径，找出定位渐变位置的位置可能最终会成为一种痛苦。因此，在大多数情况下使用两条路径可能更简单，更好 - 正如罗伯特所说。