D3.js(Data-Driven Documents)即被資料驅動的文件,它是一個用於根據資料來操作文件的JavaScript庫。相比於echart, antv等其他圖表庫，它算是一個比較底層的資料視覺化工具。它不提供任何一種現成的圖表，只做最基礎的東西，所有的圖表都需要我們在它的庫裡挑選合適的方法進行構建。在一切即資料的今天，我們更需要做到讓資料活起來，展現資料之美。
簡介
猶抱琵琶半遮面，千呼萬喚中終於要接觸資料視覺化了。資料視覺化越來越流行，讓複雜的資料和文字變得十分容易理解。作為其中的佼佼者，當然要先侃一下我們的D3了。
D3.js 是基於資料驅動文件工作方式的一款JavaScript函式庫，主要用於網頁作圖、生成互動圖形，是最流行的視覺化庫之一，它被很多其他的表格外掛所使用。D3使你有能力藉助HTML，SVG和CSS來生動地視覺化各種資料。一句話，D3根據現有的web標準，將強大的視覺化，動態互動和資料驅動的DOM操作方法完美結合，進而來製作炫目的視覺化效果。
比較一下D3和JQuery
同是操作DOM的，就少不了被拿出來比較一下:
- D3是資料驅動的，JQuery不是：我們使用JQuery選擇器$()直接操縱元素；D3通過專有的datum(),data()，enter()和exit()方法提供資料和回撥，然後操作元素
- D3用來做資料視覺化，jQuery用來建立web應用
使用
在這裡下載最新的版本(5.5.0)：
直接連結到最新版本：
<script src="https://d3js.org/d3.v5.min.js"></script>
複製程式碼NPM：
npm install d3
複製程式碼Yarn:
yarn add d3
複製程式碼瀏覽器支援情況
D3支援的主流瀏覽器不包括IE8及以前的版本。D3在Chrome、Firefox、Safari、Opera和IE9上都能正常使用。D3的大部分元件可以在舊的瀏覽器執行。
簡單示例（實現一個簡單的圖表）
柱形圖簡明、醒目，是一種簡單常用的圖表，主要構成部分有矩形、座標軸和文字說明。這個例子只繪製矩形的部分。
假設給了我們一組資料，[30, 86, 168, 281, 303, 365],根據圖片我們可以直觀的看出這些資料的關係
下面就讓我們一步一步的去實現它。
選擇集
在jQuery中我們使用選擇器$()去選擇元素，在d3中我們引入一個新的名詞叫做選擇集。使用 d3.select() 或 d3.selectAll() 選擇元素後返回的物件，就是選擇集。
- d3.select() - 從當前文件中選擇一個元素
- d3.selectAll() - 從當前文件中選擇多個元素
- selection.style() - 取得或設定樣式屬性
D3中我們可以像jQuery一樣使用鏈式語法
d3.select()
.selectAll()
.style('color', 'red');
複製程式碼資料繫結
D3中我們可以把資料繫結到DOM上，它可以通過函式來實現：
- selection.datum() - 取得或設定單個元素的資料
- selection.data() - 取得或設定一組元素的資料
以下是一個使用說明:
var dataset = ['Beijing', 'Shanghai', 'Tianjin', 'Chongqing'];
var p = body.selectAll('p');
p.data(dataset)
.text(function(d, i) {
return d;
});
複製程式碼這樣就把資料繫結到了p標籤上，函式function(d, i){}包含兩個引數，d代表資料，這裡就是與元素繫結的資料；i代表索引，從0開始
畫布
要繪圖，首先需要的是一塊"畫布"。HTML5中提供了兩種強有力的"畫布": SVG和Canvas。這裡不多做解釋。
D3提供了眾多的SVG圖形的生成器，我們在SVG畫布中實現它。
新增畫布如下:
let svg = d3.select('body') //選擇文件中的body元素
.append('svg'); //新增一個svg元素
複製程式碼繪製矩形
繪製矩形之前我們的SVG元素裡面還沒有rect元素，我們就需要自己為它新增補全，需要鏈式使用selection.enter()和selection.append()來實現。
svg.selectAll("rect")
.data(data) // 繫結資料
.enter() // 為缺失的元素返回佔位符
.append("rect") // 新增足夠數量的矩形元素
.attr("x",20 + 'px') //設定矩形的x軸和y軸位置
.attr("y",function(d,i){
return i * 28 + 'px';
})
.style("width",function(d){ // 設定矩形的寬高
return d + 'px';
})
.style("height",26 + 'px')
.text(function(d) {
return d;
})
複製程式碼一個簡單的柱形圖就成功了，實現效果如下圖
