D3JS學習筆記

一、引入d3.js

可以到官網下載，然后引入到工程中去。

或者直接用d3遠程的js，只要引入下面一行代碼即可使用。
注：d3和百度的echarts中的esl.js沖突，d3會失效。

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

 

二、選擇生成圖形位置

var svg = d3.select("#main")//選擇頁面中id=main的元素，也可以直接選擇div,p標簽等，例.select("div")
  .append("svg")//生成svg標簽
  .attr("width", w)//設定svg區域的寬度
  .attr("height", h);//設定svg區域的高度

 

這樣頁面上就會有一個空白的寬為w，高為h的空白svg區域。（d3默認長度單位是px，即可省略不寫px）
這個高度也可以從頁面中的div獲取，例如：

var h = document.getElementsByClassName("panel-body").offsetHeight;

 

三、綁定數據

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
        11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];//用於生成柱形圖的數據
svg.selectAll("rect")//選擇rect，主意此時頁面中沒有rect（rect是英文rectangle（矩形）的縮寫，是svg中內置的圖形函數）
            .data(dataset)//傳入數據
            .enter()//這個enter為了根據上一行中dataset的個數，循環生成不存在的rect元素，即重復畫矩形
            .append("rect")//固定語法，先select選擇，后enter生成，然后append綁定
            .attr("x", 0)//當前的矩形左上角坐標位置
            .attr("y", 0)
            .attr("width", 20)//矩形的寬度
            .attr("height", 100);

 

以上代碼運行之后會生成一個黑色的柱形，其實生成了20個柱子，在頁面中審查元素即可發現有20個svg，只不過左上角坐標位置一樣，所以生成了20個都疊在一起了，其實svg繪圖還是有順序之分的，即后生成的圖形會蓋住之前的，這個符合常理所以不詳細說明。

這里還有一個知識點：attr和style同樣都可改變element，attr可改變任意屬性，style只能改變樣式。

大力推薦：svg繪圖基本教程