转换多个节点中的单个节点的渐变填充

Question

假设我有一个类似于以下结构的SVG：

<svg>
    <defs>
        <linearGradient id="gradient-red">...</linearGradient>
        <linearGradient id="gradient-blue">...</linearGradient>
    </defs>
    <g class="node">
        <circle r="50" style="fill: url('#gradient-red');"></circle>
    </g>
    <g class="node">
        <circle r="100" style="fill: url('#gradient-red');"></circle>
    </g>
    <g class="node">
        <circle r="150" style="fill: url('#gradient-red');"></circle>
    </g>
    <g class="node">
        <circle r="200" style="fill: url('#gradient-red');"></circle>
    </g>
    <g class="node">
        <circle r="250" style="fill: url('#gradient-red');"></circle>
    </g>
</svg>

我现在有五个带有红色渐变的圆圈。我理解如何更改所选节点的颜色 - 我只是将其定位（通过d3.select）并将其样式更改为'fill', 'url("#gradient-blue")。但是，对于那个节点，我如何将渐变填充从红色转换为蓝色？

这样的事情导致没有补间/转换，而是导致即时颜色交换：

d3.transition().duration(1000)
    .tween('start', () => {
        let test = d3.select(currentTarget);
        test.transition().duration(1000).style('fill', 'url("#gradient-blue")');

如果我要转换渐变本身的stop-color，它会改变所有的节点/圆圈（因为你正在改变<defs>）。

我究竟做错了什么？

Answer 1

Transition's interpolation

在D3中，转换基本上将起始值插入到结束值。如果我们插入数字，这很容易证明。例如，让我们从50过渡到2000：

const interpolator = d3.interpolate(50, 2000);
d3.range(0, 1.05, 0.05).forEach(function(d) {
  console.log(interpolator(d))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

我们还可以插入字符串：

const interpolator = d3.interpolate("March, 2000", "March, 2020");
d3.range(0, 1.05, 0.05).forEach(function(d) {
  console.log(interpolator(d))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

The problem

现在，让我们来看看你的情况：你想从这个插值：

• url("#gradient-red")

对此：

• url("#gradient-blue")

这里有什么可能的中间体？你能看出这是不可能的吗？这是证明：

const interpolator = d3.interpolate("url(#gradient-red)", "url(#gradient-blue)");
d3.range(0, 1.1, 0.1).forEach(function(d) {
  console.log(interpolator(d))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

如您所见，第一次插值将立即导致最终值。

Possible solutions

最明显的解决方案是插入停止颜色。但是，正如您刚刚发现的那样，这将改变所有圆的渐变。

因此，天真的修复是创建几个渐变，每个圆圈一个，具有唯一的ID。虽然这可能是3或4个圆圈的适当解决方案，但如果你有数十或数百个元素，它显然不是一个聪明的解决方案。

话虽这么说，这是我的建议：

1. 创建一个临时渐变，让它给它ID #gradient-temporary，就像红色一样。
2. 然后，当你选择（或以某种方式过滤它）一个圆圈时，将它的填充从"url(#gradient-red)"更改为"url(#gradient-temporary)"。此更改是立即的，屏幕上没有明显的效果。
3. 对此临时渐变的停止颜色进行过渡。
4. 转换完成后，将圆圈的填充从"url(#gradient-temporary)"更改为"url(#gradient-blue)"。同样，这是立竿见影的。此外，将临时渐变的停止颜色更改为红色。

这样，您可以拥有数百个圆圈，但您只需要3个渐变来转换它们。

以下是使用该方法的演示，点击每个圆圈进行转换：

const circles = d3.selectAll("circle");
circles.on("click", function() {
  const element = this;
  d3.select(element).style("fill", "url(#gradient-temporary)");
  d3.select("#gradient-temporary").select("stop:nth-child(2)")
    .transition()
    .duration(1000)
    .style("stop-color", "rgb(0,0,255)")
    .on("end", function() {
      d3.select(element).style("fill", "url(#gradient-blue)");
      d3.select("#gradient-temporary").select("stop:nth-child(2)")
        .style("stop-color", "rgb(255,0,0)")
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
    <defs>
        <linearGradient id="gradient-red" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(211,211,211);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
        <linearGradient id="gradient-temporary" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(211,211,211);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
        <linearGradient id="gradient-blue" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(211,211,211);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
        </linearGradient>
    </defs>
    <g class="node">
        <circle r="20" cx="20" cy="70" style="fill: url('#gradient-red');"></circle>
    </g>
    <g class="node">
        <circle r="20" cx="80" cy="70" style="fill: url('#gradient-red');"></circle>
    </g>
    <g class="node">
        <circle r="20" cx="140" cy="70" style="fill: url('#gradient-red');"></circle>
    </g>
    <g class="node">
        <circle r="20" cx="200" cy="70" style="fill: url('#gradient-red');"></circle>
    </g>
    <g class="node">
        <circle r="20" cx="260" cy="70" style="fill: url('#gradient-red');"></circle>
    </g>
</svg>