d3js enter/exit深入了解

在 Data joins 章节我们演示了当data和dom element个数相同时的情况

<div id="content">
  <div></div>
  <div></div>
  <div></div>
</div>

给定下面的数据

var myData = [ 10, 40, 20 ];

当我们对div元素join上数据时

d3.select('#content')
  .selectAll('div')
  .data(myData);

myData 数据的个数和div元素的个数是相同的。

但是，如果数据和dom元素的个数如果不相同的话，会怎样呢？

如果数据个数多于dom元素个数那么说明有DOM元素的缺口，我们需要 add elements
如果数据个数少于dom元素个数，那么说明DOM元素有剩余，我们需要 remove elements

幸运的是D3可以帮助我们非常方便地管理这两种情况，分别通过 .enter来添加 而通过.exit来删除.

.enter

.enter 指明了所有和data相比dom元素的缺口，enter和exit都是定义在update selection上的 (the selection returned by .data):

d3.select('#content')
  .selectAll('div')
  .data(myData)
  .enter();

.enter 返回代表需要增加的那些元素（已经绑定了数据）的selection. 通常跟随.enter的都是 .append 操作

d3.select('#content')
  .selectAll('div')
  .data(myData)
  .enter()
  .append('div');

再看一个例子，有下面的div元素

<divid="content">

  <div></div>
  <div></div>
  <div></div>
</div>

var myData = ['A', 'B', 'C', 'D', 'E'];

我们使用.enter和 .append 来add div elements for D and E:

  d3.select('#content')
    .selectAll('div')
    .data(myData)
    .enter()
    .append('div');

需要说明的是我们可以join一个数组到空的selection上去，并接着使用.enter().append()这个pattern

.exit

.exit返回未能绑定到数据的dom元素，一般来说紧跟着的是 .remove操作:

d3.select('#content')
  .selectAll('div')
  .data(myData)
  .exit()
  .remove();

再来重复上面的例子，只是把数据改为只有一个元素的数组

var myData = ['A'];

这里我们使用 .exit 紧跟 .remove 来删除那些多余没有绑定上数据的元素:

d3.select('#content')
  .selectAll('div')
  .data(myData)
  .exit()
  .remove();

Putting it all together

我们可以对以下selection中的元素执行修改操作:

the existing elements(update section)
the entering elements(enter section)
both existing and entering elements

大多数情况下我们修改属性的操作可以直接使用(enter+update)一起来操作，但是有的时候我们可能希望对enter,update来分开设置不同的styling.

我们看看update section(dom依然是前面的有三个子div)

<div id="content">
    </div>

    <div id="menu">
        <button onClick="doUpdate();">Add elements using .enter and .append</button>
    </div>
</div>

var myData = ['A', 'B', 'C', 'D', 'E'];

function doUpdate() {
    var u = d3.select('#content')
      .selectAll('div')
      .data(myData);

    u.enter()
      .append('div');

    u.text(function(d) {
        return d;
    });
}

注意这段代码，当点击button后，新的元素将被加进来（绑定上D,E），但是由于.text函数调用仅仅在update selection上起作用，因此只有existing elements(in update section)才被添加了对应的A,B,C文字。但是注意：如果再次点击button,则会全部添加上文字哦！原因是D和E div元素已经被插入dom，因此再次执行click函数时update section已经包含了所有5个div元素！！

我们也可以对.enter section调用text()方法这样就直接把D,E文字打印出来了。

如果我们希望一次性地把upate和enter section的div都打印上对应的data,还有一种方法是先merge两个section，再执行text()方法:

var myData = ['A', 'B', 'C', 'D', 'E'];

var u = d3.select('#content')
  .selectAll('div')
  .data(myData);

u.enter()
  .append('div')
  .merge(u) // 先merge, 随后对enter和update两个section中的dom元素执行text()方法！
  .text(function(d) {
    return d;
  });

General update pattern

d3社区通用的update pattern:

function update(data) {
  var u = d3.select('#content')
    .selectAll('div')
    .data(data);

  u.enter()
    .append('div')
    .merge(u)
    .text(function(d) {
      return d;
    });

  u.exit().remove();
}

当数据发生变化时，我们调用update(data)函数来完成DOM的更新

function update(data) {
  var u = d3.select('#content')
    .selectAll('div')
    .data(data);

  u.enter()
    .append('div')
    .classed('new', true)
    .text(function(d) {
      return d;
    });

  u.text(function(d) {
      return d;
    })
    .classed('new', false);

  u.exit().remove();
}

Data join key function

When we do a data join D3 binds the first array element to the first element in the selection, the second array element to the second element in the selection and so on.

当我们执行data join操作时，d3将data数组的value默认一对一地和dom元素绑定，也就是第一个数据对应第一个dom元素，第二个数据对应第二个dom元素，。。。

然而，如果数据数组顺序如果发生了变化（比如在数据data数组sort, add, remove时），那么data可能会join到不同的dom元素上去。

这时，我们可以通过给.data提供一个key function来解决这个问题。这个key function将针对每一个数据元素返回一个唯一的id，这样D3就能确保相同的数据总是绑定到相同的dom元素!

我们来看一个例子：

var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var i = 25;

function doInsert() {
    if(i < 0)
        return;

    var myData = letters.slice(i).split('');
    i--;
    update(myData);
}

function update(data) {
    var u = d3.select('#content')
        .selectAll('div')
        .data(data, function(d) {
            return d;
        });

    u.enter()
        .append('div')
        .merge(u)
        .transition()
        .style('left', function(d, i) {
            return i * 32 + 'px';
        })
        .text(function(d) {
            return d;
        });
}

doInsert();

<div id="content">
    </div>

    <div id="menu">
        <button onClick="doInsert();">Insert element</button>
    </div>

以下是带key和不带key两种方式插入的不同表现