डी 3: अलग-अलग चयनों पर सही ढंग से चेन संक्रमण कैसे करें

Question

मैं लोकप्रिय डी 3 लाइब्रेरी के वी 3 का उपयोग कर रहा हूं और मूल रूप से तीन संक्रमण करना चाहता हूं, इसके बाद एक दूसरे के बाद: पहला संक्रमण बाहर निकलने के चयन पर लागू होना चाहिए, दूसरा अपडेट चयन और प्रवेश चयन के लिए तीसरा। उन्हें इस तरह से जंजीर किया जाना चाहिए कि जब चयन में से कोई एक खाली हो, तो उसका संबंधित संक्रमण छोड़ दिया जाता है। अर्थात। जब कोई निकास चयन नहीं होता है, तो अद्यतन चयन तुरंत शुरू होना चाहिए। अब तक, मैं इस कोड के साथ आया हूं (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 साथ काम नहीं करता, शायद इसलिए कि वे एसवीजी तत्वों लेकिन div रों नहीं हैं।

Answer 1

निश्चित रूप से। यहां दो तरीके हैं।

सबसे पहले, आप एक स्पष्ट delay का उपयोग कर सकते हैं, जिसे आप खाली संक्रमण को छोड़ने के लिए selection.empty का उपयोग करके गणना करते हैं। (यह केवल क्या आपके पास पहले से की एक मामूली संशोधन है।)

var div = d3.select("body").selectAll("div") 
    .data(["enter", "update"], function(d) { return d || this.textContent; }); 

// 2. update 
div.transition() 
    .duration(duration) 
    .delay(!div.exit().empty() * duration) 
    .style("background", "orange"); 

// 3. enter 
div.enter().append("div") 
    .text(function(d) { return d; }) 
    .style("opacity", 0) 
    .transition() 
    .duration(duration) 
    .delay((!div.exit().empty() + !div.enter().empty()) * duration) 
    .style("background", "green") 
    .style("opacity", 1); 

// 1. exit 
div.exit() 
    .style("background", "red") 
    .transition() 
    .duration(duration) 
    .style("opacity", 0) 
    .remove(); 

http://bl.ocks.org/mbostock/5779682

यहाँ एक मुश्किल बात आप को अपडेट करने में तत्वों इससे पहले कि आप पर संक्रमण बनाने पर संक्रमण बनाने के लिए है कि है प्रवेश तत्व; ऐसा इसलिए है क्योंकि enter.append अद्यतन चयन में तत्वों को दर्ज करने में विलीन हो जाता है, और आप उन्हें अलग रखना चाहते हैं; विवरण के लिए Update-only Transition example देखें।

वैकल्पिक रूप से, आप मौजूदा चयनों में इन जंजीर संक्रमणों को लागू करने के लिए transition.transitionchain transitions, और transition.each का उपयोग कर सकते हैं। Transition.each के संदर्भ में, select.transition को नया बनाने के बजाय मौजूदा संक्रमण को विरासत में मिला है।

var div = d3.select("body").selectAll("div") 
    .data(["enter", "update"], function(d) { return d || this.textContent; }); 

// 1. exit 
var exitTransition = d3.transition().duration(750).each(function() { 
    div.exit() 
     .style("background", "red") 
    .transition() 
     .style("opacity", 0) 
     .remove(); 
}); 

// 2. update 
var updateTransition = exitTransition.transition().each(function() { 
    div.transition() 
     .style("background", "orange"); 
}); 

// 3. enter 
var enterTransition = updateTransition.transition().each(function() { 
    div.enter().append("div") 
     .text(function(d) { return d; }) 
     .style("opacity", 0) 
    .transition() 
     .style("background", "green") 
     .style("opacity", 1); 
}); 

http://bl.ocks.org/mbostock/5779690

मुझे लगता है उत्तरार्द्ध, थोड़ा और मुहावरेदार है, हालांकि transition.each का उपयोग कर चयन करने के लिए संक्रमण लागू करने के लिए (बजाय डिफ़ॉल्ट पैरामीटर के साथ निकाले जाते संक्रमण) एक व्यापक रूप से जाना जाता सुविधा नहीं है।