D3.js基礎語法，精通D3.js，D3.js小書，第二篇

                                                                                                   第二章

      我們上篇文章講到了數據綁定datum()、data()，相信都已經會用了，但是如果 "數組長度 ≠ 元素數量"不一致，就會帶來3個選擇集：update、enter、exit

//數組長度 大於 元素數量時，則說明有部分不存在的元素，即將進入可視化（enter）;
//數組長度 小於 元素數量時，則說明有部分多餘的元素，即將移出可視化（exit）;
//數組長度 等於 元素數量時，則綁定數據的元素，即將被更新（update）;
 

<div id="odiv">
    <p></p>
    <p></p>
    <p></p>
</div>

//1.第一種情況 目前odiv裏面有三個p,但是數組長度爲6,則說明有部分不存在的元素,所以我們要添加不存在的元素
//#enter

let p = d3.select('#odiv').selectAll('p');//選中#odiv下面所有的p
let arr = [1,5,6,4,2,3];//數組
let update = p.data(arr);//給每一個元素綁定對應的數據
p.text((d,i)=>{//第一個是表數據,第二個是索引
    return d;
});
let enter = update.enter();
enter.append('p').text((d)=>d);

 

//2.第二種情況 目前odiv裏面有三個p,數組長度爲2,則說明有部分多餘的元素,所以我們要刪除多餘的元素
//#exit

let p = d3.select('#odiv').selectAll('p');
let arr = [2,6];
let update = p.data(arr);
p.text((d)=>d);
let exit = update.exit();
exit.remove();

 

//3.在不知道數組長度的情況下,一般都用一下模板來解決

let arr = [10,20,30];
let p = d3.select('#odiv').selectAll('p');
//#綁定數據之後,分別獲取update、enter、exit部分
let update = p.data(arr);
let enter = update.enter();
let exit = update.exit();
//#1.update部分的處理方法
    update.text(d=>d);
//#2.enter部分的處理方法
    enter.append('p')
         .text(d =>d);
//#3.exit部分的處理方法
    exit.remove();

本文講了update、enter、exit，怎麼樣學會了嗎？

有想一起學習D3的朋友可以加QQ羣881658075，一起學習進步