2016-03-01 31 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