d3.js:转换SVG线性渐变中的颜色？

Question

正如标题所说:使用D3.js,是否可以转换线性渐变的颜色？

例如,如果我有这个渐变:

var gradient = svg.append("svg:defs")
  .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "0%")
    .attr("spreadMethod", "pad");
gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "yellow")
    .attr("stop-opacity", 0.6);
gradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "red")
    .attr("stop-opacity", 0.6);
svg.append("svg:rect")
    .attr("width", width)
    .attr("height", 8)
    .style("fill", "url(#gradient)");

我可以将它转换成从蓝色到红色而不是黄色到红色的渐变吗？

Answer 1

是的 - 就D3而言,改变渐变的定义与改变圆的位置或类似的东西没有什么不同.您可以使用以下代码执行所需的操作.

gradient.select("stop")
        .transition()
        .attr("stop-color", "blue");