为什么渐变色的过渡不起作用？

Question

I'm trying to change fill color of a rect element.

var linearGradient = svg.append("defs")
    .append("linearGradient")
    .attr("id", "linear-gradient-"+key);
...
svg.append("rect")
    .attr("id","color-filler")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "url(#linear-gradient-old)");

When clicking a radio button, it calls a function to change the fill color.

svg.select("#color-filler")
    .transition().duration(900)
    .style("fill", "url(#linear-gradient-new)");

It did change the color, but there were no transition at all. Is there any alternative way to try this?

Answer 1

D3 transitions use d3's interpolators when transitioning a value. The interpolator used depends on the nature of the value:

1. If value is a number, use interpolateNumber.
2. If value is a color or a string coercible to a color, use interpolateRgb.
3. Use interpolateString. ( from the docs )

You are supplying a string, the string interpolator will "find numbers embedded in a and b, where each number is of the form understood by JavaScript" ( docs ). Matching numbers in each value are then interpolated.

Even if the space between the start and end strings could be interpolated - you'd be interpolating the string, not the reference that the string refers to, and certainly not the properties of the referenced elements.

Instead, you could interpolate a gradient's properties rather than the element using that gradient:

 var svg = d3.select("svg"); var gradient = svg.append("defs") .append("linearGradient") .attr("id", "linear-gradient"); var stops = gradient.selectAll("stop") .data([{offset:"0%",color1:"steelblue",color2:"yellow"}, {"offset":"100%",color1:"crimson",color2:"steelblue"}]) .enter() .append("stop") .attr("offset",function(d) { return d.offset; }) .attr("stop-color", function(d) { return d.color1; }) var rect = svg.append("rect") .attr("id","color-filler") .attr("width", 100) .attr("height", 100) .style("fill", "url(#linear-gradient)"); stops.transition() .attr("stop-color", function(d) { return d.color2; }) .duration(2000); 

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

A much less appealing alternative would be to build an interpolator that would transition between the referenced gradients. This would be much more involved and would require extra considerations if the number of stops was unequal for each gradient, or if the rotation was different, etc. It would also require the use of a temporary element or the modification of existing gradient(s).