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上
主要通過兩個函數來綁定數據
- datum(): 綁定到一個數據到選擇元素上
- 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();
版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。