关于D3.js的数据引入 data() enter() exit()

关于D3.js的数据引入 data() enter() exit()以及key Function 的说明

<div id='stack'>
  <div>**First div**</div>
  <div>**Second div**</div>
</div>
let arr1 = let data = [
      { name: 'aa', id: 'a' },
      { name: 'bb', id: 'b' },
      { name: 'cc', id: 'c' },
      { name: 'dd', id: 'd' },
      { name: 'ee', id: 'e' },
      { name: 'ff', id: 'f' },
    ];
    let u = d3.select('#stack')
      .selectAll('div')
      .data(arr1)
    // no key function,此时默认index匹配连接,即第一条数据与第一个dom绑定,数据绑定在
    //对应dom的_data_属性上
    //例如：第一个div的属性有一个_data_:{ name: 'aa', id: 'a' }
    //此时因为只存在两个dom节点,故数据只匹配到前两个
      .enter()
    //这一步多余的4条数据会进入enter()函数
      .append('div')
    //多余的四条数据继续绑定新加入的dom,进行数据绑定
      .html(function(d) { return d });
    console.log(u);
    

let arr2 = [
      { name: 'aaa', id: 'a' },
      { name: 'bbb', id: 'b' },
      { name: 'ccc', id: 'c' },
      { name: 'ddd', id: 'd' },
      { name: 'eee', id: 'e' },
      { name: 'fff', id: 'f' },
    ];
    let u = d3.select('#stack')
      .selectAll('div')
    //此时因为上面的操作,已存在6个div的dom,且已经绑定了上述arr1 的数据
    ///例如：第一个div的属性有一个_data_:{ name: 'aa', id: 'a' }
      .data(arr2, function(d, i) { return d.id })  
    // key function used
    //此时接入数据后,匹配的原则是按照每条数据的id来匹配(d.id),这时的6条数据会去
    //d3选中的6个dom元素的_data_绑定的数据中找每一个item的id是否可以匹配,
    //如果匹配成功,则替换成新的数据绑定到相应dom的_data_属性上
    //如果数据没有匹配上dom,即有多余的数据未使用完,则这部分数据进入enter()函数中
    //如果有多余的dom没有匹配上数据,则这部分dom进入exit()函数中
      .style('color', 'red')