डी 3 संक्रमण

Question

के साथ धीरे-धीरे svg टेक्स्ट के रूप में प्रदर्शित संख्या बदलना संख्या मैं डी 3 के साथ svg टेक्स्ट के रूप में प्रदर्शित संख्या के मूल्य को धीरे-धीरे बदलने के लिए एक आसान तरीका ढूंढ रहा हूं।

var quality = [0.06, 14]; 
// qSVG is just the main svg element 

qSVG.selectAll(".txt") 
    .data(quality) 
    .enter() 
    .append("text") 
    .attr("class", "txt") 
    .text(0) 
    .transition() 
    .duration(1750) 
     .text(function(d){ 
      return d; 
     }); 

चूंकि इस मामले में टेक्स्ट एक संख्या है, इसलिए मुझे आशा है कि संक्रमण के अंत में इसे बढ़ाने के लिए एक आसान तरीका है।

शायद आप में से कोई एक विचार है।

चीयर्स

Answer 1

यह पहले से ही d3JS लगता है एक उपयुक्त समारोह "ट्वीन" कहा जाता है प्रदान करता है

यहाँ कोड उदाहरण के महत्वपूर्ण हिस्सा है।

.tween("text", function(d) { 
     var i = d3.interpolate(this.textContent, d), 
      prec = (d + "").split("."), 
      round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1; 

     return function(t) { 
      this.textContent = Math.round(i(t) * round)/round; 
     }; 
    });​ 

http://jsfiddle.net/c5YVX/280/

आप उन्हें किसी भी अंत मूल्य के लिए किसी भी शुरुआत भले ही उनकी संख्या परिशुद्धता से एक निश्चित समय अंतराल पर बढ़ाने के कर सकते हैं।

यह एसवीजी पाठ के लिए लागू किया गया है लेकिन निश्चित रूप से मानक HTML टेक्स्ट के लिए भी काम करता है।

यदि आपको केवल गोलाकार संख्याओं के लिए सादे ट्विन फ़ंक्शन की आवश्यकता है, तो यह थोड़ा अधिक हल्का हो जाता है।

.tween("text", function(d) { 
     var i = d3.interpolate(this.textContent, d), 

     return function(t) { 
      this.textContent = Math.round(i(t)); 
     }; 
    });​