D3 update, enter and remove

Question

I'm not sure what it is that I'm missing, I have a function that renders bubbles on my chart and I would like to call that function when new data is available, however, it is creating new bubble on top of existing ones when I call it. It's not removing and updating? What is it that I'm missing?

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();
    }

Answer 1

this.bubblePeople is the enter selection. You have to call .exit() on the update selection, which you obtain by setting a variable equal to the return value of .data(data) . From the update selection, you can call .enter() and .exit() .

I've changed your variable names to represent which selection the variable references.

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();
    }