d3.js transition()。remove()不工作 [英] d3.js transition().remove() not working
问题描述
我在d3.js中有一个可视化的问题。
I have a problem with a visualization in d3.js.
我有三个组包含几乎相同的可视化,是一个多个小可视化。可视化包括时间线,在改变必须添加/移除适当的数据点时。下面是更新的代码:
I have three groups containing almost identical visualizations, being a take on "multiple small" visualizations. The visualization incorporates a timeline, upon change of which appropriate data points have to be added/removed. Here's the code that does the updating:
var channels = { bt: { x: 0, y: -100 }, sms: { x: -300, y: 200 }, call: { x: 300, y: 200 } };
//Draw web for each channel
for (channel in channels) {
this.circles[channel] = this.web[channel].selectAll("circle")
.data(this.displayedNodes, function (d) {
return d.id;
});
this.circles[channel].exit().transition().duration(500).attr("r", 0).remove();
this.circles[channel].enter()
.append("circle")
.attr("class", "person")
.attr("r", 0)
.attr("cx", function (d) {
return d.friendScales[channel](chart.minScores[channel]).x;
})
.attr("cy", function (d) {
return d.friendScales[channel](chart.minScores[channel]).y;
})
.attr("fill", function (d) {
//return chart.clusterColors[d.cluster];
return chart.colors[channel];
})
.attr("stroke-width", 2)
.attr("stroke", function (d) {
return d3.rgb(chart.colors[channel]).darker();
})
.attr("id", function (d) {
return "bubble_" + d.id;
})
.on("mouseover", function (d, i) {
return chart.show_details(d, i, this);
})
.on("mouseout", function (d, i) {
return chart.hide_details(d, i, this);
});
}
.exit()。transition ,圆圈只是滑开,因为它们的数据值现在为0.然而,如果我打开Chrome控制台,手动输入完全相同的事情,这评价,它工作正常。我假设这与JavaScript的异步模型有关,我不是一个JS wiz,所以我有点在这里,这应该是罚款在任何其他语言...
The .exit().transition().remove() part does nothing, the circles just slide away, as their data value is now 0. However if I open the Chrome console and manually type in exactly the same thing this evaluates to, it works fine. I assume this has something to do with JavaScript's asynchronous model, I'm not a JS wiz, so I am a bit at a loss here, this should be fine in any other language...
任何想法都非常感谢!
从评论中添加,因为他们变得巨大:
To add from the comments, as they are becoming huge:
工作范例: http://www.student.dtu.dk/~s103826/
代码: https:// github.com/haljin/d3-webchart/blob/master/Sensible/js/WebChart.js
要查看问题:将灰色矩形拖到时间线(通过拖动边缘调整大小)到结束处的区域,没有数据 - 圆圈应该按 exit()消失transition()。remove()
但不要。如果我在该区域设置断点,但在Chrome控制台中输入相同的字符,则它们会这样做。
To see the problem: Drag the grey rectangle on the timeline (resize by draggin edges) onto the area at the end, that does not have data - the circles should disappear as per exit().transition().remove()
but don't. If I set a break point at that area however and type the same in the Chrome console, they do.
推荐答案
为了帮助,我重新选择了所有圈子,而不是使用现有的更新选择 this.circles
:)
Thanks to Lars for help, I was re-selecting all circles, rather than using the existing update selection this.circles
:)
我现在觉得很蠢。
这篇关于d3.js transition()。remove()不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!