d3中的enter，exit，update概念

d3是基於數據綁定的思想的，選擇器選擇元素，然后元素與數據綁定。由於元素與數據未必數量一致，會產生，元素多於數據或元素少於數據。

元素與數據一一對應，是 update 部分，表示已經存在的元素，用於更新
元素少於數據，是enter部分，表示即將進入的元素，即缺少的元素，用於添加
元素多於數據，是exit部分，表示即將退出的元素，用於刪除

updage，enter，exit都可以從元素的角度來度量。

<div id='con'>
    <p>11</p>
    <p>22</p>
    <p>33</p>
    <p>44</p>
</div>

1. update

var myData = ['a','b','c','d'];
var bound = d3.select('#con')
            .selectAll('p')
            .data(myData);

//綁定數據的元素，暫稱為綁定集，直接修改元素的話，就是修改update部分，enter或exit部分，不會參與
//因此data得到的數據集，也可以直接視為update，不過這樣容易引起誤會，bound.enter() 或 bound.exit()很自然
//但是update.enter()或update.exit()，就容易讓人迷惑，因為update與enter和exit是並列的關系。

var update = bound;

update.text(d => d);

2. enter

var myData = ['a','b','c','d','e','f'];
var bound = d3.select('#con')
            .selectAll('p')
            .data(myData);

var enter = bound.enter();

enter.append('p').text(d => d);

3. exit

var myData = [];
var bound = d3.select('#con')
            .selectAll('p')
            .data(myData);

var exit = bound.exit();

exit.remove();

4. join

join 方法可以將enter，update，exit 同時操作

var myData = ['a','b','c','d','e','f'];
var bound = d3.select('#con')
            .selectAll('p')
            .data(myData);

bound.join(
    enter => enter.append('p'),
    update => update.attr('class','red'),
    exit => exit.remove()
).text(d => d)

join也可以直接傳入字符串str，效果等同於enter.append(str)

bound.join('p').text(d => d)

5. merge

merge用來合並不同的選取，例如合並enter()和update()

var myData = ['a','b','c','d','e','f'];
var bound = d3.select('#con')
            .selectAll('p')
            .data(myData);

var update = bound;
var enter = bound.enter().append('p');

enter.merge(update).text(d => d)