使用SVG繪制條形圖(精)

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

2、).append(svg).attr(width, w).attr(height, h);這些代碼會在結束的的標簽前面插入新的svg元素，將其寬度和高度設置為500像素和100像素。同時，代碼還把返回的結果保存在了變量svg中，因此后面可以方便地引用這個SVG元素，而不 必每次再使用d3.select(svg)之類的代碼重新選擇。接下來，不創(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中的所有矩形。當然，這時候什么都還沒有呢，所以會返回一個空的元素集。接下來data(dataset)看到了數據集中有20個值，就把這些值交給了enter()處理。然后，enter()會為 每個數據值返回一個占位元素，讓它們都有對應的尚未創(chuàng)建的rect。根據這20個占位元素，append(rect)會分別把它們插入DOM中。每個rect必須有x、y、width和height屬性。這里就是用attr()為每個新創(chuàng)建的rect設置了這些屬性。2 / 4使用 SVG 繪制條形圖圖 1 重疊在一起的條形圖這時候所有條形都已經生成了，但它們的坐標和大小全都一樣，所

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

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