javascript - Amending D3 circle animation -


this simple question. here jsfiddle, animate circle between 2 nodes using d3 (original code mike bostock's): http://jsfiddle.net/guill84/uxy8d9vs/5/.

how stop circle returning node when it's reached node b? relevant bit of code follows:

  var path = d3.select("path#ab"),   startpoint = pathstartpoint(path);    marker.attr("r", 7)     .attr("transform", "translate(" + startpoint + ")");    transition();     //get path start point placing marker   function pathstartpoint(path) {     var d = path.attr("d"),     dsplitted = d.split(" ");     return dsplitted[1].split(",");   }    function transition() {     marker.transition()         .duration(2000)         .attrtween("transform", translatealong(path.node()));    }    function translatealong(path) {     var l = path.gettotallength();     return function(i) {       return function(t) {         var p = path.getpointatlength(t * l);         return "translate(" + p.x + "," + p.y + ")";//move marker       }     }   }     

var l = path.gettotallength() / 2; 

because path 2 arcs, 1 b, other b a. traversing full path it's going return a. doing half length of path stops @ b.

on point fiddle ends crashing chrome on pc, think it's calling transition ('the infinite loop' bit)


Comments

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -