d3.js中update,enter,exit的概念
d3.js
中update
,enter
,exit
的概念图示:
# enter
enter
指的是数据超过元素的部分,一般用来新建元素,关键代码:
<div id='wrapper'></div>
1
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
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
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
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
2
3
4
5
6
var myData = [];
d3.select('#wrapper')
.selectAll('p')
.data(myData)
.exit()
.remove()
1
2
3
4
5
6
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
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
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
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
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
2
3
4
5
6
7
8
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13