理解D3中的數據鏈接(data join)和選取(selection)是怎麼工做的

瞭解過D3的同窗，對下邊的這張圖片想必都很熟悉

D3是data-diven-document的意思，那麼到底什麼是數據驅動文檔呢？D3是怎樣把數據跟dom元素鏈接到一塊兒的？

• 通常是分爲三步：

  • selectAll 選取
  • data 綁定
  • 經過enter() update() exit() 操做
• 就像下邊的代碼所示：

svg.selectAll("circle")  //return empty selection
  .data(data)   // 跟一個數組綁定，返回update selection
  .enter() //返回enter selection
  .append("circle") //
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 2.5);

• 下面咱們仔細的看一下D3的select和data join

selection

• 通常來講，你可能會認爲selection是包含dom元素的數組，其實這是錯誤的。selection是array的子類，它包含了操作選中元素的方法，好比：attr style；並繼承了array的方法。
• selection是數組的數組。d3.select和d3.selectAll都返回的是把包含一個group數組的數組，而selection.selectAll返回包含多個group的數組。

數據綁定 (data join)

• 當你給selectin綁定數據，實際上data是存儲在selection中每個dom元素的__data__屬性上。

d3.select('body').__data__ = 42 等價於
    d3.select('body').datum(42) 
    d3.select('body').datum(42).append('h1')  //h1繼承了父級的數據

什麼是D3中的data？

• data就是包含值的數組。
• data數組中的值是跟selection中的group對應的，而不是跟group中的元素。（selection.data defines data per-group rather than per-element: data is expressed as an array of values for the group, or a function that returns such an array. Thus, a grouped selection has correspondingly grouped data!）

數據綁定中的key

• 默認是經過比較datum和element的index來綁定的。

• 另外咱們還能夠指定一個key函數，自定義key pair。

• 須要注意：key 函數是每一個group中的each element執行一次，而不是整個group來對比。

enter update exit

• 若是selection和data中的key匹配不上，那麼就有了上述三個selection
• 注意上述三個selection中未匹配的元素用null表示

Merging Enter & Update

• enter.append有一個反作用：把update中的null元素替換成enter中新建立的元素

這樣整個數據綁定和選擇的過程大體就是這樣。
本文中的內容，基本是[https://bost.ocks.org/mike/se...]這篇文章中講的，我把它整理了一下，加了點本身的理解。若是有不明白的地方，原文講的更加細緻。