為散點(diǎn)圖添加新的過渡效果

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

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

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

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

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

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