D3.js是一個JavaScript的函數(shù)庫，主要用來做數(shù)據(jù)可視化。
本節(jié)內(nèi)容介紹了選擇集、動態(tài)屬性、enter、exit、update操作和過渡。選擇集描述如何選中想要操作的節(jié)點(diǎn)；動態(tài)屬性控制選中節(jié)點(diǎn)元素的屬性；enter、exit、update分別來添加節(jié)點(diǎn)、移除節(jié)點(diǎn)、更新節(jié)點(diǎn)；過渡用來制作動畫效果。
下載最新版本（4.11.0）在這里：
也可直接鏈接，拷貝下面片段：
<script src="https://d3js.org/d3.v4.min.js"></script>
D3教程：點(diǎn)擊這里
Selections
D3可以選擇某一種標(biāo)簽的所有節(jié)點(diǎn)進(jìn)行批量操作，也可以根據(jù)需要選擇單獨(dú)的節(jié)點(diǎn)進(jìn)行操作。當(dāng)使用JavaScrip對某一種標(biāo)簽節(jié)點(diǎn)操作時需要進(jìn)行迭代操作，而使用D3可以批量操作，減少代碼冗余。
選擇所有節(jié)點(diǎn)進(jìn)行操作：
d3.selectAll("p").style("color", "white");
選擇單獨(dú)節(jié)點(diǎn)進(jìn)行操作：
d3.select("body").style("background-color", "black");
以上示例是按照標(biāo)簽名來選擇節(jié)點(diǎn)元素（“p”和“body”），還可以按照attribute value、class、id等選擇節(jié)點(diǎn)元素。與jQuery相似，使用#匹配id，.匹配class......
Dynamic Properties
樣式、屬性可以被指定為D3中數(shù)據(jù)的函數(shù)，而不僅僅是簡單的常量。
例如，隨機(jī)初始化段落的顏色：
d3.selectAll("p").style("color", function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
});
根據(jù)奇偶設(shè)置段落的顏色：
d3.selectAll("p").style("color", function(d, i) {
return i % 2 ? "#fff" : "#eee";
});
數(shù)據(jù)可以動態(tài)綁定到節(jié)點(diǎn)元素中。數(shù)據(jù)被指定為一個數(shù)組，每個元素作為一個參數(shù)傳遞到函數(shù)中，默認(rèn)情況下是按索引逐個元素進(jìn)行傳遞，數(shù)組中的第一個元素被傳遞給第一個節(jié)點(diǎn)，第二個元素被傳遞給第二個節(jié)點(diǎn)，以此類推。
例如，將數(shù)字?jǐn)?shù)組綁定到段落元素，段落字體大小按數(shù)組中這些數(shù)字來依次顯示：
d3.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.style("font-size", function(d) { return d + "px"; });
Enter and Exit
使用enter和exit函數(shù)，分別可以為傳入的數(shù)據(jù)創(chuàng)建新的節(jié)點(diǎn)和去除多余的節(jié)點(diǎn)。
當(dāng)數(shù)組綁定到節(jié)點(diǎn)時，數(shù)組中的元素逐個與選中的節(jié)點(diǎn)進(jìn)行綁定。如果節(jié)點(diǎn)數(shù)量少于數(shù)組元素?cái)?shù)量時，會創(chuàng)建新節(jié)點(diǎn)綁定多出的數(shù)據(jù)。如果節(jié)點(diǎn)數(shù)量多于數(shù)組元素?cái)?shù)量時，會移除末尾多出的節(jié)點(diǎn)。enter之后一般使用append來進(jìn)行節(jié)點(diǎn)元素的實(shí)際創(chuàng)建，exit之后一般使用remove來移除多出的節(jié)點(diǎn)。
例：
d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d) { return "I’m number " + d + "!"; });
更新節(jié)點(diǎn)元素。不會創(chuàng)建新的節(jié)點(diǎn)。
// Update...
var p = d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return d; });
創(chuàng)建新的節(jié)點(diǎn)。當(dāng)節(jié)點(diǎn)數(shù)量小于數(shù)組元素?cái)?shù)量時，創(chuàng)建新的節(jié)點(diǎn)，使節(jié)點(diǎn)數(shù)量與數(shù)據(jù)元素?cái)?shù)量相等。
// Enter...
p.enter().append("p")
.text(function(d) { return d; });
刪除多余節(jié)點(diǎn)。當(dāng)節(jié)點(diǎn)數(shù)量大于數(shù)組元素?cái)?shù)量時，移除末尾多余的節(jié)點(diǎn)，使節(jié)點(diǎn)數(shù)量與數(shù)據(jù)元素?cái)?shù)量相等。
// Exit...
p.exit().remove();
Transitions
D3支持動畫效果，這種動畫效果可以通過對樣式屬性的過渡實(shí)現(xiàn)。其補(bǔ)間插值支持多種方式，比如線性、彈性等。
d3-transition詳解：點(diǎn)擊這里
這里介紹四個函數(shù)。
transition()
啟動過渡效果。其前后是圖形變化前后的狀態(tài)（形狀、位置、顏色等等）。
duration()
指定過渡的持續(xù)時間，單位為毫秒。
ease()
指定過渡的方式，常用的有：
- linear：普通的線性變化
- circle：慢慢地到達(dá)變換的最終狀態(tài)
- elastic：帶有彈跳的到達(dá)最終狀態(tài)
- bounce：在最終狀態(tài)處彈跳幾次
delay()
指定延遲的時間，表示一定時間后才開始轉(zhuǎn)變，單位同樣為毫秒。此函數(shù)可以對整體指定延遲，也可以對個別指定延遲。
例，背景色過渡到黑色，1秒后開始過渡，過渡時長為1秒：
d3.select("body").transition()
.delay(1000)
.duration(1000)
.style("background-color", "black");
更多內(nèi)容：Github個人博客
備注：本文發(fā)表于 https://cnyangkui.github.io/2017/10/11/d3core.html
