WHAT

D3.js是一個JavaScript庫操縱文檔基於數據。D3幫助你把數據使用HTML、SVG和CSS。D3強調web標準給你完整的現代瀏覽器的功能沒有把自己專有的框架,結合強大的可視化組件和數據驅動的DOM操作方法。

D3是一個專門處理2d場景的數據可視化的庫

WHY

社區已經存在大量處理數據可視化的js庫,為何還要學習D3呢?

類似echarts,highcharts這些高度封裝好的庫,已經可以很好的在PC和移動設備上運行,兼容當前絕大部分瀏覽器,將常見的一些柱狀圖,餅圖,折線圖等已經很好的封裝,開發者不需要做太多事情即可直接拿來使用

當開發過程中遇到一些需要個性化展示的可視化需求時,類似echarts,highcharts這類庫並不能很好支持,此時便需要更加靈活的D3,D3就像是一隻畫筆,可以讓你自由的在瀏覽器上發揮你的智慧和才能,讓你更好的自由發揮

D3可以提供很好的自由度,也意味著其上手難度和學習成本等是高於echarts這類配置化的可視化庫,至於在項目中選擇哪個庫,需要結合項目需求、組員能力等情況

幾個常見可視化庫npm對比

HOW

如何學習D3呢?

其實無論從零學習何種技術,作為普通基層碼農無非就看視頻、官方文檔和相關的文檔這幾個主要渠道,若是身邊有相關的大神便能事半功倍了

接下來就是從萬能的hello word開始吧

hello word

在頁面中創建一個空的h1標籤,然後通過D3將h1的內容修改為hello word

<h1></h1>

<script type="text/javascript">
  window.onload = function () {
    // 獲取h1的dom, 將其內容替換為 hello word
    const h = d3.select('h1').text('hello word')

    // 將h1標籤的字體顏色和大小修改
    h
      .style('color', 'blue')
      .style('font-size', '40px')
  };
</script>

使用D3編寫一個hello word就是這麼簡單.整體的使用感覺是不是很類似古老的jq

常見API

選擇元素

• d3.select()
  • 選擇所有指定元素的第一個
• d3.selectAll()
  • 選擇指定元素的全部

綁定數據

綁定數據是D3中一個比較獨特的功能,能將數據綁定到DOM上

主要通過兩個函數來綁定數據

1. datum(): 綁定到一個數據到選擇元素上
2. data(): 綁定一個數組到選擇元素上,數組的各項值分別與選擇元素的各元素綁定,相對於datum比較常用

• 使用datum 綁定數據

<h1></h1>
<h1></h1>
<h1></h1>

<script type="text/javascript">
  window.onload = function () {
    // 獲取h1的dom選擇集
    d3.selectAll("h1")
      .datum("datum bind data")
      .text((data, index) => {
        // data 是 datum 綁定的數據, index 是選擇元素對應的索引
        // return 的數據 才是頁面上選擇元素內展示的內容
        return `${data} ${index}`
      });
  };
</script>

頁面上三個h1標籤分別顯示為

datum bind data 0
datum bind data 1
datum bind data 2

• 使用data 綁定數據

<h1></h1>
<h1></h1>
<h1></h1>

<script type="text/javascript">
  window.onload = function () {
    // 定義一個data綁定數據的數組
    const arr = ['蘋果', '香蕉', '西瓜']

    // 獲取h1的dom選擇集
    d3.selectAll("h1")
      .data(arr) // 將arr中的數據 分別綁定到h1選擇集中對應的數據
      .text((data, index) => {
        // data 是 datum 綁定的數據, index 是選擇元素對應的索引
        // return 的數據 才是頁面上選擇元素內展示的內容
        return data
      });
  };
</script>

頁面上三個h1標籤分別顯示為

蘋果
香蕉
西瓜

需要注意的是: 若是arr的數量小於h1的數據集數量,此時超過arr長度的元素中則顯示其標籤內原有的數據

選擇、插入、刪除元素

已經講解了 select 和 selectAll，以及選擇集的概念。本節具體講解這兩個函數的用法。

假設在 body 中有三個段落元素：

<p>Apple</p>
<p>Pear</p>
<p>Banana</p>

現在，要分別完成以下四種選擇元素的任務。

選擇第一個 p 元素

t("p");
p1.style("color","red");

選擇三個 p 元素

var p = body.selectAll("p");
p.style("color","red");

選擇第二個 p 元素

有不少方法，一種比較簡單的是給第二個元素添加一個 id 號。

Pear

然後，使用 select 選擇元素，注意參數中 id 名稱前要加 # 號。

var p2 = body.select("#myid");
p2.style("color","red");

選擇後兩個 p 元素

給後兩個元素添加 class，

<p class="myclass">Pear</p>
<p class="myclass">Banana</p>

由於需要選擇多個元素，要用 selectAll。注意參數，class 名稱前要加一個點。

var p = body.selectAll(".myclass");
p.style("color","red");

插入元素

插入元素涉及的函數有兩個：

• append()：在選擇集末尾插入元素
• insert()：在選擇集前面插入元素

假設有三個段落元素，與上文相同。

append()

body.append("p")
    .text("append p element");

在 body 的末尾添加一個 p 元素，結果為：

Apple
Pear
Banana
append p element

insert()

在 body 中 id 為 myid 的元素前添加一個段落元素。

body.insert("p","#myid")
  .text("insert p element");

已經指定了 Pear 段落的 id 為 myid，因此結果如下。

Apple
insert p element
Pear
Banana

刪除元素

刪除一個元素時，對於選擇的元素，使用 remove 即可，例如：

var p = body.select("#myid");
p.remove();