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
