【 D3.js 入門系列 --- 3 】 作一個簡單的圖表！

 前面說了幾節，都是對文字進行處理，這一節中將用 D3.js 作一個簡單的柱形圖。

    作柱形圖有不少種方法，好比用 HTML 的 div 標籤，或用 svg 。

    推薦用 SVG 來作各類圖形。SVG 意爲可縮放矢量圖形（Scalable Vector Graphics），SVG 使用 XML 格式定義圖像，不清楚什麼是SVG的朋友請先在 w3cschools 學習下，內容不多，很快就能掌握，不須要記住各類標籤，只要知道大概是什麼就行，用的時候再查。

    先看下面的代碼：

 

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
        var width = 600;
        var height = 600;
        var svg = d3.select("body").append("svg")
                       .attr("width",width)
                       .attr("height",height);

        var dataset = [ 30 , 20 , 45 , 12 , 21 ];

        svg.selectAll("rect")
           .data(dataset)
           .enter()
           .append("rect")
           .attr("x",10)
           .attr("y",function(d,i){
                return i * 30;
           })
           .attr("width",function(d,i){
                return d * 10;
           })
           .attr("height",28)
           .attr("fill","red");

</script>

    上面代碼的結果以下圖：

 

    這樣就作了一個柱形圖。分析一下上面的代碼：

    第3-4行： 定義兩個變量，分別表示 SVG 繪製領域的寬和高。

    第5-7行： 表示選擇 body 後，在 body 裏插入 svg ，用 attr 來給 svg 添加屬性。用 attr 添加屬性的效果相似於在 HTML 中給<a>元素添加屬性 href 。

    第9行： 是要使用的數據。

    第11行： 表示在 svg 中選擇全部的 rect 元素，可是實際上這時候 svg 中還不存在 rect 元素。這是 D3 一個比較特殊的地方，即它可以選擇一個空集。先不要驚訝，請看第13行。

    第12行： 表示將數據綁定要這個 svg 上。

    第13行： enter 表示當所須要的元素（這裏爲 rect ）比綁定的數據集合的元素（這裏爲 dataset ）少時，自動添加位置，使得與數據集合的數量同樣多。這裏很重要。

    第14行： 緊接上一行， append 元素 rect 。11-14行常常一塊兒出現，要注意。

    第15-27行： 設定 rect 元素的各項屬性，如位置，長短，顏色等。

 

    上面的柱形圖，對於每一個柱柱都是手動設定的長度，實際運用中咱們經常但願給定一個最大值，讓柱柱自動根據這個最大值調整百分比，顯示出來，怎麼辦呢？插入以下代碼：

var wx = d3.scale.linear()
                .domain([0,d3.max(dataset)])
                .range([0,500]);

    d3.scale.linear() 用於生成一個線性的可縮放的尺度，它的初始 domain 爲 [ 0 , 1 ] ，初始 range 爲 [ 0 , 1 ] ， 這裏的[ ]表示的是範圍。 如今咱們把 domain 設定爲 [ 0 , d3.max(dataset) ] ，即0到 dataset 中的最大值。 range設定爲0到500。 這表示若是數據是45，則返回500，若是是30，則返回333.333。

    接下來只要在添加 rect 時給width屬性賦值的時候換成變量 wx 便可。

svg.selectAll("rect")
           .data(dataset)
           .enter()
           .append("rect")
           .attr("x",10)
           .attr("y",function(d,i){
                return i * 30;
           })
           .attr("width",wx)           //注意這裏
           .attr("height",28)
           .attr("fill","red");

    這樣，寬度會隨着綁定的數據自動變化。

 

 

 

來自：

我的博客爲： www.ourd3js.com   csdn博客爲： blog.csdn.net/lzhlzz 

轉載請註明出處，謝謝。