डी 3 में अनुसूचित संक्रमण को कैसे रद्द करें?

Question

संक्रमण संहिता,

d3.select('chart').select('svg') 
    .selectAll("circle") 
    .data(sampleData) 
    .enter().append('circle') 
    .each(function (d,i) 
      { 
       d3.select(this) 
        .transition() 
        .delay(i*50) 
        .attr('cx', function(d) {return d.x;}) 
        .attr('cy', function(d) {return d.y;}) 
        .attr('r', 4); 
      }); 

मैं कैसे रोक सकता/अनुसूचित/देरी लेनदेन को रद्द?

Answer 1

जैसा कि दूसरे उत्तर में बताया गया है, आपको केवल एक नया संक्रमण निर्धारित करना है। हालांकि, पूरी बात यह है कि आप अपने कोड में क्या कर रहे हैं उससे कहीं अधिक आसान है - अलग .each() फ़ंक्शन के लिए कोई आवश्यकता नहीं है। शुरू में बदलाव को शेड्यूल करने के लिए, आप बस

d3.select('chart').select('svg') 
    .selectAll("circle") 
    .data(sampleData) 
    .enter().append('circle') 
    .transition() 
    .delay(function(d, i) { return i*50; }) 
    .attr('cx', function(d) {return d.x;}) 
    .attr('cy', function(d) {return d.y;}) 
    .attr('r', 4); 

कर सकते हैं सभी संक्रमण को रोकने के लिए समारोह (अनुसूचित और चल रहा है) बस

d3.selectAll("circle").transition(); 

पूरा डेमो here है।

Answer 2

तत्व पर एक नया संक्रमण शुरू करने से पहले से चल रहे किसी भी संक्रमण को रोक दिया जाता है। आप को रोक सकते हैं/के रूप में 0.

function stopCircleTransitions(){ 
    if(startedApplyingTransitions) 
     d3.select('chart').select('svg') 
     .selectAll("circle") 
     .each(function(d,i){ 
      d3.select(this) 
       .transition() 
       .duration(0); 
     }); 
    } 
} 

अवधि के साथ एक नया संक्रमण स्थापना करके एक d3 संक्रमण को रोकने के आप संक्रमण को रोकने के लिए यदि और केवल यदि इसे लागू करने शुरू कर दिया है, तो आप नीचे दिए गए कोड की कोशिश कर सकते करना चाहते हैं।

var startedApplyingTransitions = false; 
d3.select('chart').select('svg') 
    .selectAll("circle") 
    .data(sampleData) 
    .enter() 
    .append('circle') 
    .each(function (d,i){ 
     d3.select(this) 
      .transition() 
      .delay(i*50) 
      .attr('cx', function(d) {return d.x;}) 
      .attr('cy', function(d) {return d.y;}) 
      .attr('r', 4) 
      .each("end", function(){ //this code will do the trick 
       startedApplyingTransitions = true; 
      }); 
    }); 

Answer 3

स्वीकार्य उत्तर डी 3 के नवीनतम संस्करण के साथ काम नहीं करता है। यदि आप डी 3 वी 4 का उपयोग कर रहे हैं, तो आपको अपने चयन पर .interrupt() पर कॉल करना चाहिए।