在前一篇文章中展示了要如何將data與d3連結，並畫出圖來，但背後是怎麼做到的呢？

Update、Enter與Exit

假設在SVG中有五個<rect/>，然後現在有一組數據是[1, 2, 3, 4, 5]，我們能夠將五個<rect/>與五筆資料相對應得綁在一起。但如果數據與元素的數量不一樣的時候該怎麼辦？Update、Enter與Exit就是來處理畫面元素 (Element)和資料數量(data)不相等的情形。

現在body當中有3個<p>，有一組數據[1, 2, 3, 4, 5]，會有2筆數據沒有辦法跟畫面元素綁在一起。
這時候D3會進行以下動作：

• Enter: 建立2個空值與數據對應，通常會搭配append()使用加入實際的元素
• Update: 更新原本就有的相對應元素
  

而如果數據只剩下一個[1]，則會有2個<p>無法跟數據連結，則D3會進行以下動作：

• Exit: 移除2個元素，通常會搭配remove()使用
• Update: 更新原本就有的相對應元素

直接執行程式來看得更仔細好了

元素長度 < 資料長度

<p></p>
<p></p>
<p></p>
<script src="http://d3js.org/d3.v5.min.js"></script>
<script>
  const data = [1, 2, 3, 4, 5];

  const texts = d3.select('body').selectAll('p');

  const update = texts.data(data);
  console.log('update', update);

  const enter = update.enter();
  console.log('enter', enter);

  update.append('p').text((d) => {
    return 'update: ' + d;
  });

  enter.text((d) => {
    return 'enter: ' + d;
  });
</script>

從console來看，update的部分雖然長度是資料的5，但裡面只有3個有值，其餘2個是空的，那就是原本畫面中就有的p元素與前三個資料已經被連結了起來；而enter的部分長度也是5，不過裡面只有2個有值，那就是原本畫面中沒有的。
而我們也可以分別針對update與enter，給予不同的渲染方式，update只要更改text的值就可以了，而enter則要另外再appendp元素。

元素長度 > 資料長度

<p></p>
<p></p>
<p></p>
<script src="http://d3js.org/d3.v5.min.js"></script>
<script>
  const data = [1];

  const texts = d3.select('body').selectAll('p');

  const update = texts.data(data);
  console.log('update', update);

  const exit = update.exit();
  console.log('exit', exit);

  update.text((d) => {
    return 'update: ' + d;
  });

  exit.append('p').text((d) => {
    return 'exit';
  });
  // 通常exit的處理是remove
  // exit.remove();
</script>

從console來看，update的部分就是資料長度的1，那就是原本畫面中就有的p元素的第一個與唯一的資料已經被連結了起來；而exit的部分長度也是元素數量的3，不過裡面只有兩個有值，那就是要被移除的元素。
而我們同樣也可以分別針對update與exit，給予不同的渲染方式，update只要更改text的值就可以了，而exit我們在這邊另外再appendp元素來顯示，不過要注意的是，通常exit的部分是要被移除的。

以上就是今天的介紹，是不是覺得難度好像提昇了不少？