為散點圖添加新的過渡效果

1、為散點圖添加新的過渡效果摘 要：這一節(jié)主要介紹了為散點圖添加新的過渡效果的方法。并給出相關代碼。關鍵詞：散點圖；過渡效果；each("end", .) 3 / 3為散點圖添加新的過渡效果1不能直接添加新的過渡在為散點圖添加動畫效果后，單擊立刻可以看到每個圓形都變成了粉紅色，并且半徑也變大了。動畫最后，填充和半徑都恢復到原始狀態(tài)。這時候你可能會想，在這里再加一個過渡動畫，讓圓形從黑色平滑過渡到粉紅色。但是很遺憾，這樣會造成整個過渡中斷：.each("start", function() d3.select(this).transition() .durat

2、ion(250) .attr("fill", "magenta").attr("r", 3);)如果你這樣干了，你會發(fā)現(xiàn)圓形確實會過渡為粉紅色，但它們的位置卻不會再改變了。原因是，在默認情況下，任何元素在任意時刻都只能有一個過渡效果。新過渡效果會打斷并覆蓋原來的過渡效果。這不是個設計缺陷嗎？不，D3 這樣設計是有用意的。假設頁面上有幾個不一樣的按鈕，每一個都會觸發(fā)不同的數(shù)據(jù)視圖，如果用戶連續(xù)地把它們都單擊一遍會怎么樣？難道你不認為較早的過渡應該中止，好讓后來選擇的視圖馬上過渡進來嗎？如果熟悉jQuery，會在這里發(fā)現(xiàn)不同之處。默認情況

3、下，jQuery 會把所有過渡效果排成隊列，然后一個接一個地執(zhí)行它們。換句話說，執(zhí)行新過渡不會自動中斷原有過渡。這種設計有時候會導致令人討厭的界面行為，比如鼠標放到菜單上再離開后，菜單并不會馬上就淡出，而是必須完全淡入之后再淡出。在這里，代碼之所以“中斷”是因為第一個（空間）過渡一開始，each("start", .)就在每個元素上執(zhí)行。而在each() 里頭，又開始了第二個（顏色）過渡，這個過渡會覆蓋第一個過渡，因而圓形永遠不會再跑到它們的目標位置上了。由于過渡中存在的這個問題，一定要記住只能在each("start", .) 里面執(zhí)行立即變換，而不能

4、再添加任何過渡效果。2 each("end", .)不過，each("end", .) 則支持過渡。在執(zhí)行each("end", .) 的時候，主過渡已經(jīng)結(jié)束了，因此再執(zhí)行新過渡不會產(chǎn)生任何副作用。在里面的第一個each() 語句中，把粉色的圓形半徑增大到了7。在each("end", .)語句中，添加了兩行設置過渡和持續(xù)時間的代碼：.each("end", function() d3.select(this).transition().duration(1000) .attr("fi

5、ll", "black").attr("r", 2););注意事件發(fā)生的順序： 你單擊 p元素的文本； 圓形立即變成粉紅并增大； 圓形過渡到新位置； 圓形過渡到原來的顏色和大小。另外，試試一連串多單擊幾次p 元素?？欤瑒e多想，盡可能快地多單擊幾次。你會發(fā)現(xiàn)每次單擊都會中斷圓形的過渡。每個新過渡都會覆蓋舊過渡。除非你停止單擊，給它們時間過渡，否則圓形永遠不會跑到它們的最終位置并過渡為黑色。跟這個功能差不一樣的是，還有一種方法能夠把多個過渡安排在一起，一個接一個地執(zhí)行。怎么做？只要把多個過渡連綴起來就行。（這是3.0 版中的新功能，老版不支持。）比

6、如，以前在each("end", .) 中必須重新選擇元素，然后應用過渡，而現(xiàn)在只要在整個方法鏈最后追加一個過渡即可：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);在需要順序執(zhí)行多個過渡時，建議你使用這種連綴方法。然后，對于恰好需要在過渡開始和結(jié)束時立即執(zhí)行的（非過渡性）變化，使用each() 方法?？梢韵胍姡?/p>