[英]d3 transition remove first
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/ 小提琴: http : //jsfiddle.net/ztf6spL8/
The problem is the data matching -- by default, D3 matches based on the index. 问题在于数据匹配-默认情况下,D3根据索引进行匹配。 You're filtering based on the radius, so you probably want to match on that:
您是根据半径进行过滤的,因此您可能要在半径上进行匹配:
circle = svg.selectAll('circle').data data, ((d) -> d.r)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.