D3.js: Aktualisieren der Stopps in einem linearenGradient

Question

Ich versuche, die stop Elemente in einem SVG linearGradient mit D3.js zu aktualisieren. http://jsfiddle.net/nrabinowitz/C85R8/

Ich bin mit dem Standard-D3 Muster von Datenverknüpfung, Eingabe, Aktualisierung, Ausfahrt, etwa so::

var stops = d3.select('#myGradient').selectAll('stops') 
    .data(data); 

stops.enter().append('stop'); 

stops 
    .attr('offset', function(d) { return d[0]; }) 
    .attr('stop-color', function(d) { return d[1]; }); 

stops.exit().remove(); 

Dies funktioniert gut für die erste Einrichtung Sie können meine Arbeits Geige hier sehen die Haltestellen. Wenn ich versuche, zu aktualisieren, scheint die Funktion die erstellten Elemente jedoch nicht zu finden. Wenn ich das SVG inspiziere, sehe ich nach der Aktualisierung zwei Sätze von Stop-Elementen (die den Gradienten nicht aktualisieren können).

Zum Vergleich, funktioniert fast genau den gleichen Code mit Textelementen funktioniert perfekt.

Warum wird der Code beim Aktualisieren nicht die vorhandenen Stoppelemente richtig auswählen? Ist das ein Fehler in d3.select oder Sizzle.js?

Answer 1

Sie haben "Stopps" anstelle von "Stopp" eingegeben. Wenn Sie die Linie wie gezeigt reparieren, funktioniert sie wie vorgesehen.

Ihr Code wählt nichts aus und fügt dann zwei zusätzliche (ignorierte) Farbverlaufsstopps hinzu. Der Ausgang entfernt dann nichts, da nichts ausgewählt wurde, wobei die zwei ursprünglichen gültigen Stopps und zwei Stopps übrig bleiben, die nichts tun.