d3在页面上设置n个p标签,绑定m个数据的数据集,利用enter-update-exit将原来的p标签中的内容修改为所绑定的数据集,
时间: 2024-03-22 11:37:34 浏览: 32
可以按照以下步骤实现:
1. 选择要绑定数据的P标签,并用data方法绑定数据集:
```javascript
var p = d3.select("body")
.selectAll("p")
.data(dataSet);
```
2. 对于数据集中没有对应P标签的部分,使用enter方法创建新的P标签,并添加数据:
```javascript
p.enter()
.append("p")
.text(function(d) { return d; });
```
3. 对于数据集中已有对应P标签的部分,使用update方法更新P标签的内容:
```javascript
p.text(function(d) { return d; });
```
4. 对于P标签数多于数据集的部分,使用exit方法删除多余的P标签:
```javascript
p.exit().remove();
```
整个过程可以写成一个函数,如下所示:
```javascript
function updateP(dataSet) {
var p = d3.select("body")
.selectAll("p")
.data(dataSet);
p.enter()
.append("p")
.text(function(d) { return d; });
p.text(function(d) { return d; });
p.exit().remove();
}
```
每次调用这个函数时,就会根据数据集更新P标签的内容。