लाइन ग्राफ़ और रिक्शा

Question

का उपयोग कर संक्रमण मैं रिक्शा के अच्छे चार्टिंग ढांचे का उपयोग करके लाइन ग्राफ़ में संक्रमण जोड़ने की कोशिश कर रहा हूं। मैं डी 3 के लिए नया हूं, लेकिन ऐसा लगता है कि मुझे रिक्शा पर रेंडर फ़ंक्शन के भीतर एक ग्राफ़ डेटा जोड़ने और फिर ग्राफ़ डेटा में संक्रमण करने की आवश्यकता होगी। ग्राफ। रेंडरर

मेरा प्रश्न है, क्या वहां कुछ भी है मेरे लाइन चार्ट में कुछ एनीमेशन जोड़ने में मदद करेगा - शायद एक फ्लैट लाइन से संक्रमण - या बाएं से दाएं रेखा खींचें।

मैंने कच्चे डी 3 के साथ उदाहरण देखे हैं लेकिन रिक्शा को अपनाना मुश्किल लगता है - या शायद मैं इसे गलत कोण से मार रहा हूं।

Answer 1

केवल डी 3 (मैं रिक्शा के बारे में पता नहीं है) के साथ

, हम ऐसा कर सकते हैं निम्न कोड के साथ:

var linePath = svg.append("path") 
    .datum(data) 
    .attr("d", line) 
    .style("fill", "none") 
    .style("stroke", "#3498db") 
    .style("stroke-width", "1px") 
    .attr("transform", "translate(150, 0)"); 

var linePathLength = linePath.node().getTotalLength(); 
linePath 
    .attr("stroke-dasharray", linePathLength) 
    .attr("stroke-dashoffset", linePathLength) 
    .transition() 
     .duration(4000) 
     .ease("linear") 
     .attr("stroke-dashoffset", 0); 

कोड के पहले भाग, एक सरल रेखा खींचना एनीमेशन के बिना।

एनीमेशन दूसरे भाग में सेट है। लाइनपैथेंथ के साथ हमें पीएक्स में रेखा की लंबाई मिलती है। फिर स्ट्रोक-डैशऑफसेट जो लाइन के शुरुआती बिंदु को परिभाषित करता है 0 पर सेट होता है, जो हमें धीरे-धीरे बाएं से दाएं रेखा खींचने की अनुमति देता है।

कोड यहां http://datavis.fr/index.php?page=transition (हालांकि फ्रेंच में) पाया गया है।