使用SVG繪制條形圖(精)

1、1 / 4使用 SVG 繪制條形圖使用 SVG 繪制條形圖摘 要：這一節(jié)主要介紹了使用SVG繪制條形圖的方法。并給出相關(guān)代碼。關(guān)鍵詞：SVG；D3；動(dòng)態(tài)縮放1 創(chuàng)建 SVG 元素首先，需要確定新SVG元素的大小：var w = 500; /寬度和高度var h = 100;當(dāng)然，你可以把w和h改成其他名字，比如svgWidth和svgHeight。你覺(jué)得怎么明確，就怎么命名。JavaScript程序員非常注重效率，因此你會(huì)經(jīng)常看到一些單個(gè)字母的變量，代碼間也沒(méi)有空格，很難看懂 卻能很快寫(xiě)出來(lái)。然后，告訴D3創(chuàng)建空SVG元素，并將其添加到DOM中：var svg = d3.select(body

2、).append(svg).attr(width, w).attr(height, h);這些代碼會(huì)在結(jié)束的的標(biāo)簽前面插入新的svg元素，將其寬度和高度設(shè)置為500像素和100像素。同時(shí)，代碼還把返回的結(jié)果保存在了變量svg中，因此后面可以方便地引用這個(gè)SVG元素，而不 必每次再使用d3.select(svg)之類的代碼重新選擇。接下來(lái)，不創(chuàng)建div，而生成矩形元素rect并將它們添加到svg中：svg.selectAll(rect).data(dataset).enter().append(rect).attr(x, 0).attr(y, 0).attr(width, 20).attr(he

3、ight, 100);這行代碼選擇了svg中的所有矩形。當(dāng)然，這時(shí)候什么都還沒(méi)有呢，所以會(huì)返回一個(gè)空的元素集。接下來(lái)data(dataset)看到了數(shù)據(jù)集中有20個(gè)值，就把這些值交給了enter()處理。然后，enter()會(huì)為 每個(gè)數(shù)據(jù)值返回一個(gè)占位元素，讓它們都有對(duì)應(yīng)的尚未創(chuàng)建的rect。根據(jù)這20個(gè)占位元素，append(rect)會(huì)分別把它們插入DOM中。每個(gè)rect必須有x、y、width和height屬性。這里就是用attr()為每個(gè)新創(chuàng)建的rect設(shè)置了這些屬性。2 / 4使用 SVG 繪制條形圖圖 1 重疊在一起的條形圖這時(shí)候所有條形都已經(jīng)生成了，但它們的坐標(biāo)和大小全都一樣，所

4、以就重疊在了一起，如圖所示。當(dāng) 然，這時(shí)候的條形并沒(méi)有反映數(shù)據(jù)。2 解決重疊問(wèn)題這里，要把x值從0改為一個(gè)與i(也就是每個(gè)值在數(shù)據(jù)集中的位置序號(hào))對(duì)應(yīng)的動(dòng)態(tài)生成的值。讓 第一個(gè)條形的x軸坐標(biāo)是0,隨后的分別是21、42,依此類推。.attr(x, function(d, i) return i * 21;II條形寬20像素，外加1像素間距)結(jié)果如圖:圖 2 解決重疊問(wèn)題后的條形圖3 實(shí)現(xiàn)動(dòng)態(tài)縮放圖形可以看到，但這樣做不是很靈活。如果數(shù)據(jù)集再大一些，那么條形會(huì)更多，而最右邊的條形很可能跑 到SVG外頭去。更好的做法是使用靈活、動(dòng)態(tài)的坐標(biāo)，讓所有可見(jiàn)圖形的高度、寬度、x坐標(biāo)、y坐標(biāo),全部能根據(jù)數(shù)據(jù)

5、成比例地縮放。.attr(x, function(d, i) return i * (w I dataset.length);)現(xiàn)在所有條形的x坐標(biāo)值都直接與SVG的寬度(w)，以及數(shù)據(jù)集中數(shù)據(jù)值的個(gè)數(shù)(dataset.length) 緊緊關(guān)聯(lián)在一起了。這樣一來(lái)，所有條形就會(huì)在SVG中均勻分布圖 3 適應(yīng)頁(yè)面大小縮放后的條形圖現(xiàn)在，設(shè)置條形的寬度，讓寬度也成比例縮放。如果數(shù)據(jù)多，條形就窄一些，如果數(shù)據(jù)少，條形就寬些.3 / 4使用 SVG 繪制條形圖聲明一個(gè)新變量：var barPadding = 1;設(shè)置成SVG寬度與數(shù)據(jù)值個(gè)數(shù)的商再減掉間距值:.attr(width, w / dataset.length - barPadding)圖 4 將寬度縮放后的條形圖4 設(shè)定高度現(xiàn)在只要在設(shè)置條形高度時(shí)使用d的值就好了：.attr(height, function(d) return d * 4; /);在這里我們選擇讓高度放大4倍以顯示的更明顯，但顯示的結(jié)果卻是這樣的:圖 5 設(shè)定高度后的條形圖這是因?yàn)?，x和y值指定的是它們左上角的坐標(biāo)，每個(gè)條形的原點(diǎn)或者參照點(diǎn)都是它的左上角，所以 我們需要調(diào)整一下：.attr(y, functio