Почему не работает мой переход на градиентный цвет?

Question

Я пытаюсь изменить цвет заливки прямоугольного элемента.

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)");

При нажатии переключателя вызывается функция изменения цвета заливки.

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

Это действительно изменило цвет, но не было никакого перехода вообще.Есть ли альтернативный способ попробовать это?

Answer 1

D3 переходы используют интерполяторы d3 при переходе значения.Используемый интерполятор зависит от природы значения:

1. Если значение является числом, используйте interpolateNumber.
2. Если значение является цветом или строкой, приводимой к цвету, используйте interpolateRgb.
3. Используйте interpolateString.( из документов )

При вводе строки, интерполятор строк "найдет числа, встроенные в a и b, где каждое число имеет понятную формупо JavaScript "( документы ).Соответствующие числа в каждом значении затем интерполируются.

Даже если пространство между начальной и конечной строками можно интерполировать - вы будете интерполировать строку, а не ссылку, на которую ссылается строка, и, конечно, не свойства ссылочных элементов.

Вместо этого вы можете интерполировать свойства градиента, а не элемента, используя этот градиент:

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>

Гораздо менее привлекательной альтернативой будет создание интерполятора, который будет переходить между указанными градиентами.Это будет гораздо более сложным и потребует дополнительных соображений, если количество остановок было неравным для каждого градиента, или если вращение было другим, и т. Д. Это также потребовало бы использования временного элемента или модификации существующих градиентов..