D3.js: Aktualizowanie przystanków w liniowym Biegunie

Question

Próbuję zaktualizować elementy stop w SVG linearGradient przy użyciu D3.js. Można zobaczyć moje skrzypce pracy tutaj: http://jsfiddle.net/nrabinowitz/C85R8/

używam standardowego wzorca danych D3-join, wprowadzania, aktualizacji, zjazd, tak:

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

Działa to dobrze dla początkowego tworzenia przystanki. Jednak przy próbie aktualizacji funkcja .selectAll('stops') nie znajduje znalezionych elementów. W skrzypcach, gdy sprawdzam SVG, widzę dwa zestawy elementów stopu po aktualizacji (która nie aktualizuje gradientu).

Dla porównania działa prawie dokładnie ten sam kod z elementami tekstowymi.

Dlaczego kod nie będzie poprawnie wybierany przy aktualizacji? Czy jest to błąd w d3.select lub Sizzle.js?

Answer 1

Napisałeś "przystanki" zamiast "stop". Jeśli poprawisz linię, tak jak pokazano, będzie działać zgodnie z przeznaczeniem.

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

Twój kod nic nie wybiera, a następnie dołącza dwa dodatkowe (ignorowane) gradienty. Wyjście nie usuwa niczego, ponieważ nic nie zostało wybrane, pozostawiając dwa oryginalne ważne przystanki i dwa przystanki, które nic nie robią.