एक अलग फ़ंक्शन (डी 3)

Question

में लागू होने पर संक्रमण फ़्लिकर/स्टटर क्यों करते हैं, मैं संक्रमण के साथ गड़बड़ कर रहा था और मैंने कुछ अलग-अलग फ़ंक्शन में चयन पर संक्रमण लागू होने पर कुछ स्टटरिंग और झिलमिलाहट देखी। यदि, हालांकि, संक्रमण विधि विधि के साथ लागू किया जाता है, यह बिल्कुल निर्धारित के रूप में कार्य करता है।

नीचे कुछ पाठ को स्थानांतरित करने के नीचे नीचे छोटा उदाहरण (Fiddle) है। पहला, बाएं, स्ट्रिंग जादुई रूप से संक्रमण शुरू होने से पहले पेज को नीचे भेजता है। दूसरी, दाएं, स्ट्रिंग में पृष्ठ के शीर्ष से नीचे तक एक चिकनी संक्रमण होता है।

यह 'टेलीपोर्ट' क्यों होता है? स्पष्ट रूप से एक अलग समारोह में संक्रमण लागू करना इसे चेन करने जैसा नहीं है, लेकिन क्या यह हासिल करने का कोई तरीका है? कहें, मैं कई अलग-अलग ऑब्जेक्ट्स में एक ही संक्रमण को लागू करना चाहता हूं - विभिन्न चयनों से पुनर्प्राप्त - फिर क्या इस स्टटरिंग के बिना संक्रमण को अपने स्वयं के फ़ंक्शन में बदलने का कोई तरीका है?

var svg = d3.select('svg'); 
var textElem = svg.append('text') 
    .data(['hello world']) 
    .attr('x', 30) 
    .attr('y', 100) 
    .attr('fill', '#000') 
    .attr('id', 'a') 
    .text(function (d) { 
     return d; 
    }); 
var textElem2 = svg.append('text') 
    .data(['some text']) 
    .attr('x', 230) 
    .attr('y', 100) 
    .attr('fill', '#000') 
    .attr('id', 'a') 
    .text(function (d) { 
     return d; 
    }); 
setTimeout(foo, 3000); 

function foo() { 
    textElem.data(['hello world, again!']); 
    applyTextTransitions(textElem); 
    textElem.attr({ 
     x: 30, 
     y: 150 
    }); 
    textElem.text(function (d) { 
     return d; 
    }); 

    textElem2.data(['some more text!']) 
     .transition() 
     .duration(1000) 
     .style('opacity', 0) 
     .transition() 
     .duration(1000) 
     .style('opacity', 1) 
     .attr({ 
      x: 230, 
      y: 150 
     }) 
     .text(function (d) { 
      return d; 
     }); 
} 

function applyTextTransitions(element) { 
    element 
     .transition() 
     .duration(1000) 
     .style('opacity', 0) 
     .transition() 
     .duration(1000) 
     .style('opacity', 1); 
} 

Answer 1

मैंने डी 3 का उपयोग नहीं किया है, लेकिन क्या आपको ऐसा करने का मतलब है?

applyTextTransitions(textElem, { x: 30, y: 150 }); 

function applyTextTransitions(element, newPos) { 
    element 
    .transition() 
    .duration(1000) 
    .style('opacity', 0) 
    .transition() 
    .duration(1000) 
    .attr(newPos) 
    .style('opacity', 1) 
    .text(function(d){ 
     return d; 
    }); 
} 

https://jsfiddle.net/k8kv4arv/3/

"कूद" इसलिए होता है क्योंकि बुला कार्यों इंतजार कर रहा है जब तक applyTextTransitions() समाप्त हो गया है, तो नए आयाम लागू होता है।

Answer 2

मैं जानता हूँ कि मैं पार्टी के लिए देर हो रही है, लेकिन ...

हकलाना है कि आप हो रही है केवल इसलिए है क्योंकि आप एक संक्रमण समारोह, applyTextTransition कहते हैं, और फिर तुरंत तत्व की स्थिति बदल जाते हैं।

applyTextTransitions(textElem); 
textElem.attr({ 
    x: 30, 
    y: 150 
}); 

यही कारण है कि आपको अवांछित स्टटरिंग मिलती है।

---

साथ ही, उचित, डी 3 रास्ता कार्यों कि बदलाव लागू पुन: उपयोग करने selection.call उपयोग करने के लिए है। यह आपको एक फ़ंक्शन घोषित करने की अनुमति देता है, और संक्रमण को लागू करने वाले फ़ंक्शन को आमंत्रित करने के लिए call विधि का उपयोग करता है।

textElem.call(applyTextTransition); 

function applyTextTransition(selection) { 
    // perform selection.transition() 
} 

अब आप अपने चेनिंग में अपने फ़ंक्शन का उपयोग कर सकते हैं और आप केवल वर्तमान चयन के लिए उस फ़ंक्शन का उपयोग करने तक ही सीमित नहीं हैं।