使用隨機(jī)數(shù)據(jù)、比例尺為條形圖添加動畫效果

1、使用隨機(jī)數(shù)據(jù)、比例尺為條形圖添加動畫效果摘 要：這一節(jié)主要介紹了使用隨機(jī)數(shù)據(jù)、比例尺為條形圖添加動畫的方法。并給出相關(guān)代碼。關(guān)鍵詞：條形圖；隨機(jī)數(shù)據(jù)；比例尺 1使用隨機(jī)數(shù)據(jù)在這里我們要重用一下隨機(jī)數(shù)生成代碼。這樣就能想更新多少次就更新多少次，而且每次使用的都是新數(shù)據(jù)集。找到響應(yīng)單擊事件的匿名函數(shù)，把其中的靜態(tài)數(shù)據(jù)集替換成以下隨機(jī)生成數(shù)據(jù)集的代碼：var numValues = dataset.length; dataset = ; for (var i = 0; i numValues; i+) var newNumber = Math.floor(Math.random() * 25); d

2、ataset.push(newNumber); 這樣就可以用隨機(jī)生成的包含隨機(jī)數(shù)（024）的數(shù)組，替換原來的靜態(tài)數(shù)據(jù)集。新數(shù)組的長度與原數(shù)據(jù)集長度相同。然后，更新一下段落的內(nèi)容Click on this text to update the chart with new data values as manytimes as you like!應(yīng)該能看到如圖所示的結(jié)果圖1剛開始的圖表每次單擊上面的段落，代碼都會做如下這些事： 生成新隨機(jī)數(shù)； 把新值綁定到已有元素； 把元素過渡到與新值對應(yīng)的新位置、新高度、新顏色圖2使用隨機(jī)數(shù)據(jù)生成的圖表每次都不同2更新比例尺仔細(xì)觀察下，可能會對前面的一行代碼提

3、出質(zhì)疑var newNumber = Math.floor(Math.random() * 25);為什么是25？我們這里使用了一個固定值。實際上，這里用maxValue 代替25 可能更有意義：var newNumber = Math.floor(Math.random() * maxValue);因為在這里，我們知道這里生成的newNumber 最大不能超過25。原來之所以選定25，是因為更大的值超出了圖表比例尺的輸出范圍，會導(dǎo)致條形被切掉。圖3選用更大的值，導(dǎo)致條形被切掉應(yīng)該與數(shù)據(jù)集同步更新比例尺。每次插入新數(shù)據(jù)，都應(yīng)該校準(zhǔn)一下比例尺，確保生成的條形圖不會過高或過低。更新比例尺簡單。還記得下面創(chuàng)建yScale 的代碼嗎：.domain(0, d3.max(dataset).range(0, h);范圍不變，只要在生成新數(shù)據(jù)集之后更新比例尺的值域就好了：yScale.domain(0, d3.max(dataset);這樣就把輸入值域的最大值設(shè)置成了數(shù)據(jù)集中最大的數(shù)值?，F(xiàn)在我們把這個變量現(xiàn)在被設(shè)置為100。此時單擊段落更新數(shù)據(jù)，就能得到0100 之間的隨機(jī)數(shù)。而且，如果數(shù)據(jù)集中最大的值是100，那yScale 的值域也會擴(kuò)展到100，如圖9所示。圖4 y軸比例能夠自動適