d3.js中update,enter,exit的概念

d3.js中update,enter,exit的概念图示：

# enter

enter指的是数据超过元素的部分，一般用来新建元素，关键代码：

<div id='wrapper'></div>

var myData = ['aa', 'bb', 'cc', 'dd'];
d3.select('#wrapper')
.selectAll('p')
.data(myData)
.enter()
.append('p')
.text(function(d) {
    return d;
});

1
2
3
4
5
6
7
8
9

# update

update指的是数据和元素对得上的部分，一般用来更新元素，关键代码：

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

1
2
3
4
5
6

var myData = ['aa', 'bb', 'cc', 'dd'];
d3.select('#wrapper')
.selectAll('p')
.data(myData)
.text(function(d) {
    return d;
});

1
2
3
4
5
6
7

# exit

exit指的是元素超过数据的部分，一般用来删除元素，关键代码：

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

1
2
3
4
5
6

var myData = [];
d3.select('#wrapper')
.selectAll('p')
.data(myData)
.exit()
.remove()

1
2
3
4
5
6

# join

join是一个将上面三个联合使用的方法，关键代码:

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

1
2
3
4
5
6

d3.select('#wrapper')
.selectAll('p')
.data(myData)
.join(
    enter => enter.append('p'),
    update => update.attr('class', 'red'),
    exit => exit.remove()
).text(function(d) {
    return d;
})

1
2
3
4
5
6
7
8
9
10

不过join还有一种简单的用法，直接传一个字符串，作用相当于直接***.enter().append('str')，也是常用的一种用法。

/*enter()的用法*/
d3.select('#wrapper')
.selectAll('p')
.data(myData)
.enter()
.append('p')
.text(function(d) {
    return d;
});
/*join()的用法*/
d3.select('#wrapper')
.selectAll('p')
.data(myData)
.join('p')
.text(function(d) {
    return d;
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# merge

merge可以用来合并不同的选取，例如合并enter()和update()，关键代码：

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

1
2
3
4
5
6

var myData = ['aa', 'bb', 'cc', 'dd', 'ee', 'ff'];
let update=d3.select('#wrapper')
    .selectAll('p')
    .data(myData);
let enter=update.enter().append('p');
enter.merge(update).text(function(d) {
    return d;
});

1
2
3
4
5
6
7
8

#D3

上次更新: 2024/01/30, 00:35:17

← d3 svg 基本图形绘制 dat.gui 基本使用方法→