为散点图添加新的过渡效果

1、为散点图添加新的过渡效果摘 要：这一节主要介绍了为散点图添加新的过渡效果的方法。并给出相关代码。关键词：散点图；过渡效果；each("end", .) 3 / 3为散点图添加新的过渡效果1不能直接添加新的过渡在为散点图添加动画效果后，单击立刻可以看到每个圆形都变成了粉红色，并且半径也变大了。动画最后，填充和半径都恢复到原始状态。这时候你可能会想，在这里再加一个过渡动画，让圆形从黑色平滑过渡到粉红色。但是很遗憾，这样会造成整个过渡中断：.each("start", function() d3.select(this).transition() .durat

2、ion(250) .attr("fill", "magenta").attr("r", 3);)如果你这样干了，你会发现圆形确实会过渡为粉红色，但它们的位置却不会再改变了。原因是，在默认情况下，任何元素在任意时刻都只能有一个过渡效果。新过渡效果会打断并覆盖原来的过渡效果。这不是个设计缺陷吗？不，D3 这样设计是有用意的。假设页面上有几个不一样的按钮，每一个都会触发不同的数据视图，如果用户连续地把它们都单击一遍会怎么样？难道你不认为较早的过渡应该中止，好让后来选择的视图马上过渡进来吗？如果熟悉jQuery，会在这里发现不同之处。默认情况

3、下，jQuery 会把所有过渡效果排成队列，然后一个接一个地执行它们。换句话说，执行新过渡不会自动中断原有过渡。这种设计有时候会导致令人讨厌的界面行为，比如鼠标放到菜单上再离开后，菜单并不会马上就淡出，而是必须完全淡入之后再淡出。在这里，代码之所以“中断”是因为第一个（空间）过渡一开始，each("start", .)就在每个元素上执行。而在each() 里头，又开始了第二个（颜色）过渡，这个过渡会覆盖第一个过渡，因而圆形永远不会再跑到它们的目标位置上了。由于过渡中存在的这个问题，一定要记住只能在each("start", .) 里面执行立即变换，而不能

4、再添加任何过渡效果。2 each("end", .)不过，each("end", .) 则支持过渡。在执行each("end", .) 的时候，主过渡已经结束了，因此再执行新过渡不会产生任何副作用。在里面的第一个each() 语句中，把粉色的圆形半径增大到了7。在each("end", .)语句中，添加了两行设置过渡和持续时间的代码：.each("end", function() d3.select(this).transition().duration(1000) .attr("fi

5、ll", "black").attr("r", 2););注意事件发生的顺序： 你单击 p元素的文本； 圆形立即变成粉红并增大； 圆形过渡到新位置； 圆形过渡到原来的颜色和大小。另外，试试一连串多单击几次p 元素。快，别多想，尽可能快地多单击几次。你会发现每次单击都会中断圆形的过渡。每个新过渡都会覆盖旧过渡。除非你停止单击，给它们时间过渡，否则圆形永远不会跑到它们的最终位置并过渡为黑色。跟这个功能差不一样的是，还有一种方法能够把多个过渡安排在一起，一个接一个地执行。怎么做？只要把多个过渡连缀起来就行。（这是3.0 版中的新功能，老版不支持。）比

6、如，以前在each("end", .) 中必须重新选择元素，然后应用过渡，而现在只要在整个方法链最后追加一个过渡即可：svg.selectAll("circle").data(dataset).transition().duration(1000).each("start", function() d3.select(this).attr("fill", "magenta").attr("r", 7);).attr("cx", function(d) return xScale(d0);).attr("cy", function(d) return yScale(d1);).transition().duration(1000).attr("fill", "black").attr("r", 2);在需要顺序执行多个过渡时，建议你使用这种连缀方法。然后，对于恰好需要在过渡开始和结束时立即执行的（非过渡性）变化，使用each() 方法。可以想见，通