d3.js學習筆記--Mike Bostock: Thinking with Joins

    咱們能夠使用append方法, 來建立一個單一元素:

var svg = d3.select('svg'),
      d = {"x": 50, "y": 50};
  svg.append("circle")
      .attr("cx", d.x)
      .attr("cy", d.y)
      .attr("r", 25);

    若是想傳遞多條數據, 則須要這樣編寫:

var svg = d3.select('svg'),
      data = [{"x": 50, "y": 50}, {"x": 120, "y": 50}];
  svg.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .attr("r", 25);

這裏代碼主要的疑惑點在於: 

svg.selectAll("circle")

爲何咱們要選擇要新建立的DOM元素呢?

如下是處理方式. 咱們沒必要告訴D3如何實現, 而是告訴D3咱們所想要的. 我想要一個circle綁定到一個data上, 即每一個circle和data數組中的元素一一對應. 這種概念叫作: data join

數據 join to 存在的DOM元素, 產生一個update操做. 座標非update的數據產生enter的操做, 而右邊的DOM元素因爲沒有綁定, 則處於Exit狀態, 表明被刪除.

如今咱們來解釋如下神奇的enter-append 的代碼是如何data join:

1. 首先, svg.selectAll("circle")返回一個空的選擇器, 它的父節點是svg.

2. 空的選擇器綁定於數據data, 產生三個新的選擇器分別表明Eneter, update 和 exit. 這三個選擇器都是空的, 只有Enter爲每一個新的元素保留佔位符.

3. selection.data返回update選擇器, 當enter/exit均解綁於update的時候. selection.enter返回enter選擇器.

4.