D3.js系列 --- 初識

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)：

• d3

直接連接到最新版本：

<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;
  })

一個簡單的柱形圖就成功了，實現效果以下圖

• SVG參考文檔
• Canvas參考文檔