使用比例尺繪制散點(diǎn)圖

1、使用比例尺繪制散點(diǎn)圖摘 要：這一節(jié)主要介紹了繪制散點(diǎn)圖的方法。并給出相關(guān)代碼。關(guān)鍵詞：散點(diǎn)圖；d3.min()和d3.max()；D3 1d3.min()和d3.max()回顧一下創(chuàng)建散點(diǎn)圖的數(shù)據(jù)集：var dataset = 5, 20, 480, 90, 250, 50, 100, 33, 330, 95,410, 12, 475, 44, 25, 67, 85, 21, 220, 88;這個(gè)數(shù)據(jù)集是用數(shù)組的數(shù)組表示的。我們是把每個(gè)數(shù)組的第一個(gè)值映射到了x 軸，把第二個(gè)值映射到了y 軸?，F(xiàn)在要應(yīng)用比例尺了，先從x 軸開(kāi)始。目測(cè)一下x 值，大致是從5 到480，因此合理的值域應(yīng)該是0 到50

2、0。你想讓自己的代碼更靈活更有伸縮性吧，這樣即使將來(lái)數(shù)據(jù)集有變化也不用修改代碼。你真聰明！你考慮得很周全，假如我們?cè)诮o路邊的那個(gè)蘋(píng)果攤設(shè)計(jì)一個(gè)數(shù)據(jù)展示板，那么應(yīng)該讓代碼適應(yīng)蘋(píng)果銷量的大幅增長(zhǎng)。而圖表呢，無(wú)論是賣(mài)出5 個(gè)蘋(píng)果還是100 成個(gè)蘋(píng)果，也都應(yīng)該能夠正常顯示。既然不想給值域設(shè)置固定的值，那可以使用兩個(gè)方便的數(shù)組函數(shù)：d3.min() 和d3.max()，讓它們幫你動(dòng)態(tài)分析數(shù)據(jù)集。比如，下面的代碼會(huì)循環(huán)數(shù)組中的每個(gè)x值，返回其中最大的那個(gè)：d3.max(dataset, function(d) return d0; / 引用嵌套數(shù)組中的第一個(gè)值);以上代碼會(huì)返回480，因?yàn)?80 是數(shù)據(jù)集

3、中最大的x 值。下面解釋一下代碼的執(zhí)行過(guò)程。D3 的min() 和max() 原理相同，都接受一到兩個(gè)參數(shù)。第一個(gè)參數(shù)必須是對(duì)數(shù)組也就是數(shù)據(jù)集的引用。假如有一個(gè)簡(jiǎn)單的一維數(shù)組，如7, 8, 4, 5, 2，那很明顯就知道怎么比較這些值的大小，不需要第二個(gè)參數(shù)。比如：var simpleDataset = 7, 8, 4, 5, 2;d3.max(simpleDataset); / 返回8max() 函數(shù)只是簡(jiǎn)單地循環(huán)數(shù)組中的每個(gè)值，然后找出其中最大的那個(gè)。可是， 我們的數(shù)據(jù)集并不是個(gè)簡(jiǎn)單的數(shù)值數(shù)組， 而是一個(gè)數(shù)組的數(shù)組。調(diào)d3.max(dataset) 可能會(huì)得到不想要的結(jié)果：var data

4、set = 5, 20, 480, 90, 250, 50, 100, 33, 330, 95,410, 12, 475, 44, 25, 67, 85, 21, 220, 88;d3.max(dataset); / 返回85, 21。要告訴max() 想比較哪個(gè)值，就必須傳入第二個(gè)參數(shù)，也就是一個(gè)存取器函數(shù)：d3.max(dataset, function(d) return d0;);這個(gè)存取器函數(shù)是一個(gè)匿名函數(shù)，max() 會(huì)把數(shù)組中的每個(gè)元素（即這里的d）交給它。存取器函數(shù)的目的是指定比較哪個(gè)值。對(duì)我們的數(shù)據(jù)集而言，需要比較x 值，也就是嵌套數(shù)組的第一個(gè)值，位置為0。因此存取器函數(shù)就是

5、這樣的：function(d) return d0; / 返回嵌套數(shù)組中的第一個(gè)值這個(gè)函數(shù)的語(yǔ)法是用匿名函數(shù)來(lái)取得并返回值：.attr("cx", function(d) return d0;).attr("cy", function(d) return d1;)2設(shè)置動(dòng)態(tài)縮放把我們剛剛介紹的知識(shí)綜合起來(lái)，就可以創(chuàng)建一個(gè)動(dòng)態(tài)映射x 軸值的比例尺函數(shù)：.domain(0, d3.max(dataset, function(d) returnd0; ).range(0, w);首先，我們把這個(gè)比例尺函數(shù)命名為了xScale。當(dāng)然，你可以根據(jù)自己的需要來(lái)命名，

6、但xScale 可以幫我記住這個(gè)函數(shù)的作用。其次，這里同時(shí)設(shè)定了值域和范圍，使用的是包含兩個(gè)值的數(shù)組。第三，我們把值域的最小值設(shè)定為0 了。（實(shí)際上，在這里也可以使用min() 來(lái)生成動(dòng)態(tài)的值。）而值域的最大值則設(shè)定為數(shù)據(jù)集中的最大值（目前是480，將來(lái)可能會(huì)變）。最后，注意一下輸出范圍被設(shè)定為0 到w（即SVG 的寬度）。接下來(lái)可以使用非常類似的代碼為y 軸創(chuàng)建比例尺函數(shù)：.domain(0, d3.max(dataset, function(d) return d1; ).range(0, h);要注意的是，max() 方法這一次引用的是d1， 即嵌套數(shù)組的y 值。類似地，range()

7、方法中的最大值設(shè)定成了h，而不是w。3整合縮放后的值現(xiàn)在要做的就是在散點(diǎn)圖代碼的基礎(chǔ)上，修改一下為每個(gè)值創(chuàng)建圓形的代碼。比如，原來(lái)是.attr("cx", function(d) return d0; / 返回?cái)?shù)據(jù)集中的原始值)為了使用縮放后的值（而不是原始值），要改成這樣：.attr("cx", function(d) return xScale(d0); / 返回縮放后的值)同樣，對(duì)于y 軸的代碼.attr("cy", function(d) return d1;)要改成這樣：.attr("cy", function(d) return yScale(d1);)為了比例協(xié)調(diào)，下面再對(duì)設(shè)置文本標(biāo)簽坐標(biāo)的代碼作相同修改，即原來(lái)的.attr("x", function(d) return d0;).attr("y", function(d) return d1;)要改成這樣：.attr("x", function(d) return xScale(