Javascript D3更新、输入和删除

我不确定我缺少的是什么，我有一个函数可以在图表上呈现气泡，我想在有新数据可用时调用该函数，但是，当我调用它时，它会在现有气泡的基础上创建新气泡。它不是在删除和更新吗？我错过了什么

renderCalls(data){
        let self = this;
        this.bubblePeople = this.canvas.selectAll('.openCalls')
                    .data(data)
                    .enter().append('g')
                    .attr('class', '.openCalls').attr('id', function (d) { return d.index })
                    .attr('transform', function (d) { return "translate(" + (self.getColX(d.x) + 25) + "," + (self.getRowY(d.y) + 25) + ")" })
                    .call(D3['drag']().on("start", this.dragstarted)
                        .on("drag", this.dragged)
                        .on("end", this.dragended.bind(this)));

                this.bubblePeople.append("title").text(function (d) { return d.name + ' (' + d.index + ')' })

                this.bubblePeople.append('circle')
                    .attr('r', 30)
                    .attr('fill', 'red')
                    .attr('fill-opacity', .5)
                    .attr("text-anchor", "middle");




                this.bubblePeople.append('text')
                    .attr('text-anchor', 'middle')
                    .style('fill', 'white')
                    .style('font-size', function (d) { return d.shopcode == 'PSO' ? '14px' : '18px' })
                    .style('font-weight', 'bold')
                    .text(function (d) { return d.shopcode == 'PSO' ? 'PSO (' + d.count + ')' : d.count });

                this.bubblePeople.exit().remove();
    }

---

this.bubblePeople

是输入选择。您必须在更新选择上调用

.exit（）

，您可以通过设置一个等于

.data（data）

返回值的变量来获得更新选择。从更新选择中，可以调用

.enter（）

和

.exit（）

我已经更改了变量名，以表示变量引用的选择

renderCalls(data){
        let self = this;
        this.bubblePeopleUpdate = this.canvas.selectAll('.openCalls').data(data);

        this.bubblePeopleEnter = this.bubblePeopleUpdate.enter().append('g')
                    .attr('class', '.openCalls').attr('id', function (d) { return d.index })
                    .attr('transform', function (d) { return "translate(" + (self.getColX(d.x) + 25) + "," + (self.getRowY(d.y) + 25) + ")" })
                    .call(D3['drag']().on("start", this.dragstarted)
                        .on("drag", this.dragged)
                        .on("end", this.dragended.bind(this)));

                this.bubblePeopleEnter.append("title").text(function (d) { return d.name + ' (' + d.index + ')' })

                this.bubblePeopleEnter.append('circle')
                    .attr('r', 30)
                    .attr('fill', 'red')
                    .attr('fill-opacity', .5)
                    .attr("text-anchor", "middle");




                this.bubblePeopleEnter.append('text')
                    .attr('text-anchor', 'middle')
                    .style('fill', 'white')
                    .style('font-size', function (d) { return d.shopcode == 'PSO' ? '14px' : '18px' })
                    .style('font-weight', 'bold')
                    .text(function (d) { return d.shopcode == 'PSO' ? 'PSO (' + d.count + ')' : d.count });

                this.bubblePeopleUpdate.exit().remove();
    }

---

在添加类时，您没有执行“点”，类正在添加。当您选择类时，您使用点。如果您可以创建一个JSFIDLE，那么仍然创建更多气泡而不更新它会有所帮助。我想你还没有设置一个键函数来告诉D3如何解析你的数据。此外，您还必须为更新选择编写代码。事实上，输入和退出可以工作，但无法使更新工作，不确定原因。现在，我将$（'.openCalls'）.remove（）放在rmove all中，这样回车键就生效了。您确定在

.data（）

中不需要键函数吗？这也是d3.js v3还是v4