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
Post a Comment