D3.js:停止转换被中断? [英] D3.js: Stop transitions being interrupted?
问题描述
我正在使用 D3.js.我的过渡效果很好,但我只有一个问题:如果第二个过渡在第一个过渡结束之前开始,
I'm working with D3.js. I've got transitions working nicely, but I just have one problem: if a second transition starts before the first one ends,
这是一个演示问题的 JSFiddle:http://jsfiddle.net/kqxhj/11/
This is a JSFiddle demonstrating the problem: http://jsfiddle.net/kqxhj/11/
它在大多数情况下都能正常工作 - CDG 和 LAX 会随着数据的变化而附加和删除 - 但是如果您快速连续单击该按钮两次,您会注意到新元素不会出现.
It works fine most of the time - CDG and LAX get appended and removed as the data changes - but if you click the button twice in rapid succession, you'll notice that the new elements don't appear.
这是我代码的核心:
function update(data) {
var g = vis.selectAll("g.airport").data(data, function(d) {
return d.name;
});
var gEnter = g.enter().append("g")
.attr("class", function(d) {
return "airport " + d.name;
});
// Perform various updates and transitions...
[...]
// Remove exited elements.
g.exit().transition()
.duration(1000)
.attr("transform", "translate(0," + 1.5*h + ")");
g.exit().transition().delay(1000)
.remove();
}
d3.select('#clickme').on("click", function() {
update(current_data);
});
我试图添加一些调试语句来弄清楚发生了什么,但我能看到的是,当它发生时,退出选择有 4 个元素,而不是 3 个 - 我不明白为什么会这样.
I've tried to add some debug statements to figure out what's going on, but all I can see is that when it happens, the exit selection has 4 elements in, not 3 - I don't understand why this is.
有没有办法在 D3 或基本 JavaScript 中确保转换不重叠?
Is there a way, either in D3 or in basic JavaScript, that I can ensure the transitions don't overlap?
推荐答案
更新:从 D3 3.5 版(2014 年 10 月)开始,可以通过使用 命名转换.您只需为每个过渡添加不同的名称.
UPDATE: Since the version 3.5 of D3 (October 2014), it is possible to perform concurrent transitions on elements through the use of named transitions. You simply have to add a different name to each transition.
这篇关于D3.js:停止转换被中断?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!