d3.js: Übergang der Farben in einem linearen linearen Gradienten?

Question

Wie der Titel sagt: mit D3.js, ist es möglich, die Farbe eines linearen Gradienten zu übergehen?

Zum Beispiel, wenn ich diese Steigung habe:

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

Kann ich es dann über ein Gradient von Blau bis Rot gehen zu werden, anstatt zu rot gelb?

Answer 1

Ja - das Ändern der Definition eines Gradienten unterscheidet sich nicht von der Änderung der Position eines Kreises oder ähnlichem, was D3 betrifft. Sie könnten zum Beispiel mit dem folgenden Code machen, was Sie wollen.

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