D3 - 基礎篇

D3 - API手冊：https://github.com/d3/d3/wiki/API–%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C

D3 - v5學習：https://blog.csdn.net/qq_34414916/category_7608878.html

D3 全稱：Data-Driven-Documents

前置：

HTML - 超文本標記語言，用於設計網頁內容。

CSS - 層疊樣式表，用於設計網頁樣式

JavaScript - 腳本語言，用於設計網頁行爲

SVG - 可放縮矢量圖形，用於繪製可視化圖形

引用D3：

<script src="https://d3js.org/d3.v5.min.js"></script>

基本用法：

1. 選擇

let p = d3.select("body");
let p = d3.selectAll("p");

select(“body”)就是D3中的選擇集，即選擇body標籤，selectAll(“p”)表示選擇所有的p標籤。

p.text("Hello World");

text("")表示爲選中的標籤填上文字。

2. 數據綁定

data() 和 datum()

datum() 將一個數據綁定到所有選擇集上

let p = d3.selectAll("p");
p.datum("String")
 .text(function(d,i){
    	return d + " " + i;
 });

String 0

String 1

String 2

String 3

data() 將一個數組綁定到選擇集上，數組各項和選擇集各元素綁定，建立一一對應的關係

let dataset = ["zero", "one", "two", "three"];
    let p = d3.select("body").selectAll("p");
    p.data(dataset)
        .text(function (d, i) {
            return i + ": " + d;
        });

0: zero

1: one

2: two

3: three

當數據集個數與選擇集個數不匹配的時候，需要用到update,enter,exit.

例如將數組綁定到3個p 上的時候，如下圖：

例如：

<p></p>
<p></p>
<p></p>
<script>
    let dataset = ["zero", "one", "two", "three", "four"];
    let p = d3.select("body").selectAll("p");
    let u = p.data(dataset);
    let e = u.enter();
    u.text(function (d, i) {
        return i + ": " + d;
    })
    let pe = e.append("p");
    pe.text(function (d, i) {
        return i + d;
    })
</script>

0: zero

1: one

2: two

3three

4four

其中，

let u = p.data(dataset);

表示綁定數據，得到update部分。

let e = u.enter();

表示繼續得到enter部分。

let pe = e.append("p");

表示添加足夠多的p

function(d,i)爲無名函數，其中d代表數據，也就是與某元素綁定的數據，i代表數據的索引，從0開始。

update與exit實例：

<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<script>
    let dataset = ["zero", "one"];
    let p = d3.select("body").selectAll("p");
    let u = p.data(dataset);
    let e = u.exit();
    u.text(function (d, i) {
        return i + ": " + d;
    })
    e.remove();
</script>

0: zero

1: one

3. 根據元素的屬性來選擇元素

<p>p0</p>
<p class="p1">p1</p>
<p id="p2">p2</p>
<p>p3</p>
<script>
    let t1 = d3.select("body").selectAll("p");
    let t2 = d3.select("body").selectAll(".p1");
    let t3 = d3.select("body").selectAll("#p2");

    t1.style("color", "green");
    t2.style("color", "blue");
    t3.style("color", "red");
</script>

效果圖

class屬性訪問時使用.xxx形式訪問，id爲#xxx。

可以使用匿名函數function來選擇特定元素。

style()函數爲添加樣式。

4. 插入元素

append() 在選擇集尾部插入元素

<p>p0</p>
<p class="p1">p1</p>
<p id="p2">p2</p>
<p>p3</p>
<script>
    let p = d3.select("body")
        .append("p")
        .text("add")
        .style("color", "red");
</script>

insert() 在選擇集前面插入元素

<p>p0</p>
<p class="p1">p1</p>
<p id="p2">p2</p>
<p>p3</p>
<script>
    let p = d3.select("body")
        .insert("p", ".p1")
        .text("add")
        .style("color", "blue");
</script>

5. 刪除元素

<p>p0</p>
<p class="p1">p1</p>
<p id="p2">p2</p>
<p>p3</p>
<script>
    let p = d3.select("body")
        .select("p", ".p1")
        .remove();
</script>