d3 过渡先删除

Question

如果我以删除第一个元素的方式更新我的数据（例如，按半径过滤圆列表，其中列表中的第一个太小）我希望第一个缩小，其余两个缩小留在原地。相反，第三个缩小了，第一个滑到第二个位置，第二个滑到第三个位置。我做错了什么？

用于渲染我的圈子的代码是这样的：

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

小提琴： http://jsfiddle.net/ztf6spL8/

Answer 1

问题在于数据匹配——默认情况下，D3 基于索引进行匹配。您正在根据半径进行过滤，因此您可能希望对此进行匹配：

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

完整示例here。