簡單介紹下D3熊户，D3.js是一個開源的js庫萍膛，全名是Data-Driven Documents
，因為三個字母開頭都是D嚷堡，所以簡稱D3蝗罗，主要是對DOM元素的數(shù)據(jù)驅(qū)動操作艇棕。下面看看第一部分，簡單介紹下幾個常用的基本概念串塑。
1.Selections:
在D3中沼琉，可以選擇DOM元素，進而對他們進行操作桩匪，例如更改樣式打瘪，修改其屬性，執(zhí)行數(shù)據(jù)連接或插入/刪除元素傻昙。
兩個方法闺骚，
.select() 選擇單一的DOM元素、
.selectAll()選擇所有符合條件的DOM元素
2.關(guān)于綁定數(shù)據(jù)妆档，給定一組數(shù)據(jù)和前面說到的D3 Selections僻爽，我們可以將每個數(shù)組元素附加或“連接”到Selections的每個元素。同樣有兩個方法：
- .datum()贾惦，綁定單一的數(shù)據(jù)到單一DOM元素上胸梆，基本不用。
- .data()须板，支持綁定多個數(shù)據(jù)到多個DOM元素上碰镜，經(jīng)常使用。
對于.data()函數(shù)逼纸，該函數(shù)返回一個對象洋措，對象里面包含updata selection以及enter()和exit()兩個函數(shù)。 - updata selection顯示的是成功綁定數(shù)據(jù)的DOM元素杰刽，就是數(shù)據(jù)和DOM元素一一對應(yīng)的部分菠发。
- .enter()函數(shù)，返回 相比較dom element多出的那部分data;
- .exit()函數(shù)贺嫂，返回 相比較data多出的那部分dom element,下面會說它們兩種情況的處理方式滓鸠。
對于.data()函數(shù)，該函數(shù)有兩個參數(shù)第喳，第一個參數(shù)是要綁定的數(shù)據(jù)集合糜俗，第二個參數(shù)是 key函數(shù)，決定你要綁定數(shù)據(jù)的順序曲饱。
如.data(array1,function(d){return d.key;})
至于第二個參數(shù)悠抹，什么情況下需要設(shè)置？ - 設(shè)置key函數(shù)扩淀，就是規(guī)定了數(shù)組綁定DOM元素的順序楔敌，每個數(shù)據(jù)綁定的DOM元素固定，不論數(shù)組中的數(shù)據(jù)如何變化驻谆，綁定的DOM元素都不變卵凑，讓我們視覺上看起來很舒服庆聘，很有條理；
- 不設(shè)置key函數(shù)勺卢，就是默認按照數(shù)組索引號綁定DOM元素伙判，適用于當(dāng)你的數(shù)據(jù)和DOM元素的順序相同時。當(dāng)你每次對數(shù)組中的數(shù)據(jù)進行動態(tài)更新時黑忱，會重新綁定所有的DOM元素宴抚，很容易出錯，達不到數(shù)據(jù)驅(qū)動DOM元素的目的杨何。
例子：https://bl.ocks.org/BMPMS/21ca3ca9671e93b57bee831ff2e0e99d
3.關(guān)于.enter()/.exit()的處理酱塔。
前面說到了這兩個函數(shù)分別返回的是什么，
.enter()函數(shù)危虱，返回 相比較dom element多出的那部分data，我們使用D3的目的是為了把數(shù)據(jù)和DOM元素進行綁定唐全，以便于對數(shù)據(jù)的可視化埃跷，那現(xiàn)在數(shù)據(jù)比DOM元素多，此時應(yīng)該為多出來的數(shù)據(jù)創(chuàng)建DOM元素邮利，讓他們一一綁定弥雹。
創(chuàng)建DOM元素有兩種方法，
(1).append(),一般都是跟隨.enter().append('')延届，這樣就為多出來的數(shù)據(jù)分別創(chuàng)建DOM元素剪勿，此種方法是順序創(chuàng)建，默認在上一個DOM元素之后方庭。
(2).insert(),同樣是跟隨.enter().insert('',''),兩個參數(shù)厕吉，第一個參數(shù)是要創(chuàng)建的DOM元素，第二個參數(shù)是你要插入到哪個DOM元素的前面械念。此種方法是指定了創(chuàng)建之后元素的位置头朱，其實應(yīng)該叫插入比較合適。.exit()函數(shù)龄减，返回 相比較data多出的那部分dom element,很明顯项钮，既然這部分的數(shù)據(jù)已經(jīng)不存在了，那之前為之分配的DOM元素也沒有存在的必要了希停，直接把DOM元素移除烁巫。一般這么使用，.exit().remove()宠能。
4.為什么要使用merge(),merge()可以把 update和enter部分的操作合一亚隙，更加方便數(shù)據(jù)更新。
例子：https://www.codementor.io/milesbryony/d3-js-merge-in-depth-jm1pwhurw
- d3js v3和v4中如何一次性獲取和處理enter以及update selections統(tǒng)一處理相應(yīng)邏輯?
在d3js中棍潘，我們已經(jīng)很熟悉通過select.data().append().attr這種pattern來處理可視化恃鞋，我們也知道data操作符調(diào)用后返回update selection并且通過update selection也可以訪問exit和enter selection崖媚，這些selection加起來才是整個可視化的dom集合，在d3.v3版本中無須任何其他調(diào)用恤浪，只要你執(zhí)行了update.enter().append()之后enter selection自然就merge到update selection中去了畅哑，因此我們對update selection的任何操作都會影響到整個dom集。但是在v4中水由，這個特性消失了荠呐，取而代之的是必須使用merge調(diào)用。但是要注意的是通過merge獲取到整個dom集合后砂客，update段的數(shù)據(jù)更新（比如在.each函數(shù)中對每個數(shù)據(jù)dataum增加一個字段泥张，而在其他地方使用該數(shù)據(jù))在該場景下可能存在問題。
<html>
<head>
<script src="d3.v3.min.js"></script>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</body>
</html>
var update = d3.select("body").selectAll("p").data([4,5,6,7,8])
update.enter().append("p");
update.text(function(d,i){return d}) // V3下一次調(diào)用就可以對所有5個dom元素執(zhí)行操作
// 而v4下則必須使用merge函數(shù)調(diào)用鞠值，比如:
var update = d3.select("body").selectAll("p").data([4,5,6,7,8])
var enter = update.enter().append("p")
enter.merge(update).text(function(d){return d;}) // 一次調(diào)用text就可以對所有的selection設(shè)置對應(yīng)數(shù)據(jù)了
