D3.js: Updating the stops in a linearGradient

Question

I'm attempting to update the stop elements in an SVG linearGradient using D3.js. You can see my working fiddle here: http://jsfiddle.net/nrabinowitz/C85R8/

I'm using the standard D3 pattern of data-join, enter, update, exit, like 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();

This works fine for the initial creation of the stops. However, when I try to update, the .selectAll('stops') function doesn't seem to find the created elements. In the fiddle, when I inspect the SVG, I see two sets of stop elements after the update (which fails to update the gradient).

For comparison, running almost exactly the same code with text elements works perfectly.

Why won't the code properly select existing stop elements on update? Is this a bug in d3.select or Sizzle.js?

Answer 1

You've typed 'stops' instead of 'stop'. If you fix the line as shown it will work as intended.

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

Your code selects nothing and then appends two extra (ignored) gradient stops. The exit then removes nothing as nothing was selected leaving the two original valid stops and two stops which do nothing.