我使用的是流行的d3库的V3,基本上希望有三个转换,依次是:第一个转换应用于退出选择,第二个转换应用于更新选择,第三个转换应用于回车选择。它们应该以这样的方式链接:当其中一个选择为空时,其相应的转换将被跳过。即,当没有退出选择时,更新选择应立即开始。到目前为止,我已经编写了这段代码(使用delay
函数)。
// DATA JOIN
var items = d3.select('#data').selectAll('.item');
items = items.data(data, function(d){
return d.twitter_screenname;
});
// EXIT
items.exit().transition().duration(TRANSITION_DURATION).style('opacity', 0).remove();
// UPDATE
// Divs bewegen
items.transition().duration(TRANSITION_DURATION).delay(TRANSITION_DURATION * 1)
.style('left', function(d, i) {
return positions[i].left + "px";
}).style('top', function(d, i) {
return positions[i].top + "px";
});
// ENTER
// Divs hinzufügen
var div = items.enter().append('div')
.attr('class', 'item')
.style('left', function(d, i) {
return positions[i].left + "px";
}).style('top', function(d, i) {
return positions[i].top + "px";
});
div.style('opacity', 0)
.transition().duration(TRANSITION_DURATION).delay(TRANSITION_DURATION * 2)
.style('opacity', 1);
首先,它不允许“跳过”转换;其次,我认为有一种比delay
更好的方法。我看过http://bl.ocks.org/mbostock/3903818,但我并不真正理解发生了什么。
此外,不知何故,仅仅编写items.exit().transition().duration(TRANSITION_DURATION).remove()
不能与items
一起工作,可能是因为它们不是SVG元素,而是div
。
https://stackoverflow.com/questions/17086415
复制相似问题