2016-03-01 57 views
2

大家都知道更新/进入/退出模式:运行D3更新/输入/退出时,如何在新退出期间忽略已退出的元素?

function update(data) { 

    // DATA JOIN 
    // Join new data with old elements, if any. 
    var text = svg.selectAll("text") 
     .data(data); 

    // UPDATE 
    // Update old elements as needed. 
    text.attr("class", "update"); 

    // ENTER 
    // Create new elements as needed. 
    text.enter().append("text") 
     .attr("class", "enter") 
     .attr("x", function(d, i) { return i * 32; }) 
     .attr("dy", ".35em"); 

    // ENTER + UPDATE 
    // Appending to the enter selection expands the update selection to include 
    // entering elements; so, operations on the update selection after appending to 
    // the enter selection will apply to both entering and updating nodes. 
    text.text(function(d) { return d; }); 

    // EXIT 
    // Remove old elements as needed. 
    text.exit().transition().duration(2000).attr('transform', 
    rotation = 25; 
    return 'translate(' + d.x + ',' + d.y + ') rotate('+ rotation +' 30 30)'; 
    }).remove(); 
} 

我的问题是:

如果我运行这个功能,而出口仍出现(2000年毫秒转变窗口期间),我怎么能阻止正在进行exit转换的元素调用转换。

换句话说,当进行原始选择时,它包括已经在exit().transition()状态中的元素。所以如果他们没有完成他们的转换和removed(),退出转换被再次调用这些元素。

我需要做一个过滤器吗?是否有in transition while exiting的测试?

回答

2

D3.js: Stop transitions being interrupted? 说给退出元素的特殊类,然后用它来只有承认自己刚离开元素的退出过渡

.exit() 
    .filter(function(d,i) { 
     return !d3.select(this).classed("exiting"); 
    }) 
    .classed("exiting", true) 
    .transition() 
    ... 

一个更大的问题将是你的第二个然后点击与重新引入的任何数据而它仍然受到第一次退出的影响。在您的示例中,这将消除您希望在退出过渡完成时保留的元素,并在该元素上调用remove。为了解决这个问题,我添加了即时(零延迟,零持续时间)转换到我的更新,并输入选择覆盖/写入退出选择,如果他们没有自己的转换(如果有更好的方法有人让我知道)。

这导致了另一个问题:在输入和更新中设置了.classed("exiting", false),因此在'退出'>'重新引入'>'退出'元素的情况下,.exiting类未设置,退出的转换被激活。

+1

我真的不喜欢这个解决方案。它根据我的口味不小心使用了一些类。必须有某种方式可以测试某个元素是否处于退出过程中,或者我希望如此。 –

+1

好吧,你可以添加标志到数据集,而不是,.each(函数(d,i){d.exiting = true;}),然后在过滤器中测试它,但有些可能不喜欢 - 特别是如果数据涉及多个视图。在最后的课程没什么特别的:-)。它似乎没有干净的,即api方法来问一个元素是否涉及到一个转换:http://stackoverflow.com/questions/13844179/what-is-the-standard-way-to-get-the-有效运行-D3-V3过渡换一个-GIVE – mgraham