d3.js: Transizione dei colori in una sfumatura lineare SVG?

Question

Proprio come dice il titolo: con D3.js, è possibile cambiare il colore di un gradiente lineare?

Per esempio, se ho questo gradiente:

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

Potrei poi passare a diventare un gradiente che va dal blu al rosso, piuttosto che giallo al rosso?

Answer 1

Sì: la modifica della definizione di gradiente non cambia la posizione di un cerchio o qualcosa del genere fino a D3. Potresti fare ciò che vuoi ad esempio con il seguente codice.

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