為散點圖添加動畫效果

1、為散點圖添加動畫效果摘 要：這一節(jié)主要介紹了為散點圖添加動畫效果的方法。并給出相關(guān)代碼。關(guān)鍵詞：散點圖；更新數(shù)軸；each() 1更新數(shù)軸在制作動態(tài)條形圖時，我們?yōu)闂l形圖添加了持續(xù)時間、緩動函數(shù)、延遲時間，以及使用了隨機數(shù)據(jù)和比例尺來添加動態(tài)效果。同理，我們可以為散點圖添加動態(tài)效果，我們把條形圖的制作代碼替換為散點圖即可。圖1更新后的散點圖總結(jié)一下對這個散點圖所做的改動。1. 單擊上方的文本可以生成新數(shù)據(jù)并更新圖表。2. 更新數(shù)據(jù)后，使用了動畫過渡。3. 去掉了交錯延遲效果，將所有過渡的持續(xù)時間都設(shè)定為 1 秒（1000 毫秒）。4. 同時也更新 x 和 y 軸的比例尺。5. 圓形現(xiàn)在有了固定

2、的半徑?，F(xiàn)在單擊文本，看一看這些小圓點四處穿梭的效果吧。圖中的數(shù)軸沒有變。不過，要更新數(shù)軸也很簡單。首先，給x 軸和y 軸分別添加類名x 和y，以便后面選擇它們：svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + (h - padding) + ")").call(xAxis);svg.append("g").attr("class", &

3、quot;y axis") .attr("transform", "translate(" + padding + ",0)").call(yAxis);然后，找到響應(yīng)單擊的匿名函數(shù)，在里面添加如下代碼：svg.select(".x.axis").transition().duration(1000).call(xAxis);svg.select(".y.axis").transition().duration(1000).call(yAxis);對每個數(shù)軸，我們分別做了以下幾件事。1

4、. 選擇當(dāng)前數(shù)軸。2. 初始化一個過渡。3. 設(shè)定過渡的持續(xù)時間。4. 調(diào)用適當(dāng)?shù)臄?shù)軸生成器。每個數(shù)軸生成器已經(jīng)引用了相應(yīng)的比例尺（xScale 或yScale）。由于這些比例尺已經(jīng)更新過了，所以數(shù)軸生成器可以計算出新刻度的位置。2為數(shù)據(jù)點添加動態(tài)效果有時候， 我們需要在過渡開始和結(jié)束的時候執(zhí)行一些操作。為此， 可以使用each() 方法，它能對選中的每個元素執(zhí)行任意代碼。each() 接收兩個參數(shù)： "start"或 "end"； 匿名函數(shù)，在過渡開始或結(jié)束時執(zhí)行。例如，在下面更新圓形的代碼中，我們添加了兩條each() 語句：svg.selectAl

5、l("circle").data(dataset).transition().duration(1000).each("start", function() d3.select(this).attr("fill", "magenta").attr("r", 3);).attr("cx", function(d) return xScale(d0);).attr("cy", function(d) return yScale(d1);).each("

6、;end", function() d3.select(this).attr("fill", "black").attr("r", 2););單擊觸發(fā)過渡動畫后，立刻可以看到每個圓形都變成了粉紅色（.attr("fill","magenta")），而半徑也變大了（.attr("r", 3)）。然后過渡效果一如往常。動畫最后，填充和半徑都恢復(fù)到原始狀態(tài)。圖2過渡期間的粉紅圓形這里需要注意傳給each() 的匿名函數(shù)。在這個匿名函數(shù)的上下文里，this 引用著“當(dāng)前元素”。這樣非常方便，通過它在函數(shù)里就可以隨時取得當(dāng)前選擇的元素并修改之，如下所示：.each("start",