使用比例尺繪制散點圖

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

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

3、中最大的x 值。下面解釋一下代碼的執(zhí)行過程。D3 的min() 和max() 原理相同，都接受一到兩個參數(shù)。第一個參數(shù)必須是對數(shù)組也就是數(shù)據(jù)集的引用。假如有一個簡單的一維數(shù)組，如7, 8, 4, 5, 2，那很明顯就知道怎么比較這些值的大小，不需要第二個參數(shù)。比如：var simpleDataset = 7, 8, 4, 5, 2;d3.max(simpleDataset); / 返回8max() 函數(shù)只是簡單地循環(huán)數(shù)組中的每個值，然后找出其中最大的那個?？墒牵?我們的數(shù)據(jù)集并不是個簡單的數(shù)值數(shù)組， 而是一個數(shù)組的數(shù)組。調(diào)d3.max(dataset) 可能會得到不想要的結(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() 想比較哪個值，就必須傳入第二個參數(shù)，也就是一個存取器函數(shù)：d3.max(dataset, function(d) return d0;);這個存取器函數(shù)是一個匿名函數(shù)，max() 會把數(shù)組中的每個元素（即這里的d）交給它。存取器函數(shù)的目的是指定比較哪個值。對我們的數(shù)據(jù)集而言，需要比較x 值，也就是嵌套數(shù)組的第一個值，位置為0。因此存取器函數(shù)就是

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

6、但xScale 可以幫我記住這個函數(shù)的作用。其次，這里同時設(shè)定了值域和范圍，使用的是包含兩個值的數(shù)組。第三，我們把值域的最小值設(shè)定為0 了。（實際上，在這里也可以使用min() 來生成動態(tài)的值。）而值域的最大值則設(shè)定為數(shù)據(jù)集中的最大值（目前是480，將來可能會變）。最后，注意一下輸出范圍被設(shè)定為0 到w（即SVG 的寬度）。接下來可以使用非常類似的代碼為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)在要做的就是在散點圖代碼的基礎(chǔ)上，修改一下為每個值創(chuàng)建圓形的代碼。比如，原來是.attr("cx", function(d) return d0; / 返回數(shù)據(jù)集中的原始值)為了使用縮放后的值（而不是原始值），要改成這樣：.attr("cx", function(d) return xScale(d0); / 返回縮放后的值)同樣，對于y 軸的代碼.attr("cy", function(d) return d1;)要改成這樣：.attr("cy", function(d) return yScale(d1);)為了比例協(xié)調(diào)，下面再對設(shè)置文本標(biāo)簽坐標(biāo)的代碼作相同修改，即原來的.attr("x", function(d) return d0;).attr("y", function(d) return d1;)要改成這樣：.attr("x", function(d) return xScale(