D3js Selection data, enter

用途

同步資料與圖表狀態，前端的世界似乎一直都希望資料與UI能同步，當然d3也不例外，這三個API可以協助我們方便同步圖表與資料的狀態。

data

將資料與元件綁定的方法，使用如下。

const width = 800;
const height = 600;
const svg = d3.select('svg').attr('width', width).attr('height', height);
// svg長寬為 800, 600
const rootLayer = svg.append('g');
// 習慣再建圖層，方便移動。

const datas = [{
    id: 1,
    value: 10
  },
  {
    id: 2,
    value: 880
  },
  {
    id: 3,
    value: 30
  },
  {
    id: 4,
    value: 5
  },
  {
    id: 5,
    value: 20
  },
  {
    id: 6,
    value: 20
  }
];

const circles = rootLayer.selectAll('circle')
                    .data(datas, data => data.id)

console.log('circles', circles);

解釋

以上到底是甚麼意思呢？
selectAll可以選取該元件下的所有<circle />tag，當執行完selectAll後會回傳一個selection，這時候我們使用data進行綁定。

無關乎目前rootLayer有沒有circle，第一個參數datas就是資料陣列，而第二個參數data => data.id是用來識別資料的獨立性。

等到執行完data資料綁定後，我們看看會拿到甚麼物件。

綠色部分其實就是目前selectAll選取到的元件，對應有六筆資料，但其實沒半個元件，因此是六個空。

紅色部分是新增的元件，d3發現目前有六個元件需要新增。

橘色部分則是移除了幾個元件，可能資料減少，我們可以做出對應的事件。

enter

這時候d3已經知道需要新增幾個，這時候就可以開始寫對應該怎麼加入圓。

...省略
const circles = rootLayer.selectAll('circle').data(datas, data => data.id)

console.log('circles', circles)

circles.enter()
      .append('circle')
      .attr('id', data => data.id)
      .attr('r', 10)
      .attr('cx', 10)
      .attr('cy', 20);

透過circles這selection的enter方法，可以讓d3知道該怎麼加入資料，因此當enter時會執行加入圓型，並設定各種屬性。

範例結果

結論

d3還有其他資料同步的API，可以幫助我們輕鬆同步圖表以及資料，可以說是太好用了！

參考

Codepen
d3-selection