D3.js: Aktualisieren der Stops in einem linearen Verlauf

Question

Ich versuche, die stop-Elemente in einem SVG-linearGradient mit D3.js zu aktualisieren. Hier können Sie mein funktionierendes Beispiel sehen: http://jsfiddle.net/nrabinowitz/C85R8/

Ich verwende das Standard-D3-Muster von Datenverknüpfung, Einfügen, Aktualisieren, Entfernen, wie folgt:

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 initiale Erstellung der Stops. Wenn ich jedoch versuche zu aktualisieren, scheint die .selectAll('stops')-Funktion die erstellten Elemente nicht zu finden. Im Beispiel sehe ich nach der Aktualisierung (die das Gradient nicht aktualisiert) zwei Sets von Stop-Elementen im SVG.

Zum Vergleich funktioniert das Ausführen von fast genau dem gleichen Code mit Text-Elementen perfekt.

Warum wählt der Code beim Aktualisieren vorhandene stop-Elemente nicht ordnungsgemäß aus? Ist dies ein Fehler in d3.select oder Sizzle.js?

Answer 1

Sie haben 'stops' anstelle von 'stop' eingegeben. Wenn Sie die Zeile wie gezeigt korrigieren, funktioniert sie wie beabsichtigt.

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

Ihr Code wählt nichts aus und fügt dann zwei zusätzliche (ignorierte) Verlaufsstopps hinzu. Das Exit entfernt dann nichts, da nichts ausgewählt wurde, und lässt die beiden ursprünglichen gültigen Stops und zwei Stops zurück, die nichts tun.