[英]D3 update, enter and remove
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();
}
this.bubblePeople
is the enter selection. this.bubblePeople
是输入选择。 You have to call .exit()
on the update selection, which you obtain by setting a variable equal to the return value of .data(data)
. 您必须在更新选择上调用
.exit()
,该更新选择是通过将变量设置为等于.data(data)
的返回值而获得的。 From the update selection, you can call .enter()
and .exit()
. 从更新选择中,您可以调用
.enter()
和.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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.