D3JS學習筆記

標籤：style   blog   http   color   使用   strong   資料   art   

一、引入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繪圖基本教程