डी 3

Question

में लूपिंग संक्रमण आवश्यक एक्सपोज़िशन: मैं डी 3 न्यूबी का थोड़ा सा हूं।

मेरा लक्ष्य बिंदु ए से बिंदु बी तक एक रेखा को स्थानांतरित करना है, फिर तुरंत बिंदु ए पर फिर से दिखाई दें और उस संक्रमण को दोहराएं। मैंने कई अलग-अलग चीजों की कोशिश की है, लेकिन यह निकटतम है जो मैं आया हूं।

var svg = d3.select("body") 
     .append("svg") 
     .attr("width", 500) 
     .attr("height", 500); 

// code, code, code, irrelevant code... 

function timeForTimeline(){ // har 
    var timeline = svg.append("line") 
     .attr("stroke", "steelblue") 
     .attr({ 
      'x1': 0, 
      'y1': 130, 
      'x2': 168, 
      'y2': 130 
     }); 
    (function repeat() { 
     timeline = timeline 
      .transition() 
      .duration(4000) 
      .ease("linear") 
      .attr({ 
       'x1': 0, 
       'y1': 430, 
       'x2': 168, 
       'y2': 430 
      }) 
      .each("end", function(){ 
       d3.select(this) 
        .transition() 
        .duration(0) 
        .attr({ 
         'x1': 0, 
         'y1': 130, 
         'x2': 168, 
         'y2': 130 
        }) 
        .each("end", repeat); 
      }); 
    })(); 
}; 

परिणाम एक उत्कृष्ट शुरुआती संक्रमण, लाइन जल्दी से बिंदु एक और बिंदु बी के बीच कूद duration(4000) सा प्रभाव लेने के बिना द्वारा पीछा किया है। मैंने नीचे की रेखा को हटाने की भी कोशिश की है (d3.select(this).remove()) फिर दोहराने के लिए प्रत्येक कॉल के शीर्ष पर एक नया जोड़ना()। मैंने x1, x2, y1, और y2 को रीसेट करने और पूरी तरह से संक्रमण को छोड़ने का भी प्रयास किया है। मैं यह नहीं कह रहा हूं कि मैंने उनको सही तरीके से प्रयास किया है, लेकिन मेरे परिणाम या तो कोई लाइन नहीं थे, असीमित रेखाएं, या एक पंक्ति जो बिंदु बी तक पहुंचती है और वहां रहती है।

मेरे (संभवतः बहुत सरल) लक्ष्य को पूरा करने के तरीके पर कोई अन्य सुझाव? आपकी मदद के लिए बहुत धन्यवाद!

Answer 1

ऐसा लगता है कि आपको दो बार प्रारंभिक निर्देशांक निर्दिष्ट करने की आवश्यकता नहीं है। तुम बस दोहराने समारोह के अंदर प्रारंभिक निर्देशांक नियत और इतने की तरह तुरंत यह कह सकते हैं:

function timeForTimeline() { 
    var timeline = svg.append("line") 
     .attr("stroke", "steelblue"); 

    repeat(); 

    function repeat() { 
     timeline.attr({ 
     'x1': 0, 
     'y1': 130, 
     'x2': 168, 
     'y2': 130 
     }) 
     .transition() 
     .duration(4000) 
     .ease("linear") 
     .attr({ 
     'x1': 0, 
     'y1': 430, 
     'x2': 168, 
     'y2': 430 
     }) 
     .each("end", repeat); 
    } 
} 

यहाँ एक fiddle