d3 transition remove first

Question

If I update my data in a way that removes the first element (for instances filtering a list of circles by radius where the first one in the list is too small) i want the first one to shrink away and the remaining two to stay put. Instead the third one shrinks away, the first one slides over to the second position and the second one slides into the third position. What have I done wrong?

the code used to render my circles is this:

update = (data) ->
    circle = svg.selectAll('circle').data data

    circle.enter().append('circle')
        .attr('r', 0)

    circle
      .transition().duration(250)
        .attr('r', (d) -> d.r)
        .attr('cx', (d) -> d.x)
        .attr('cy', (d) -> d.y)


    circle.exit()
      .transition().duration(250)
        .attr('r', 0)
        .remove()

fiddle: http://jsfiddle.net/ztf6spL8/

Answer 1

The problem is the data matching -- by default, D3 matches based on the index. You're filtering based on the radius, so you probably want to match on that:

circle = svg.selectAll('circle').data data, ((d) -> d.r)

Complete example here .