d3.js - In d3 is it possible to dynamically change where a path position starts for tweening? -

to: clarify. picture circle. start drawing circle particular coordinate. lets draw circle starting coordinate.

i playing path data derived svg glyphs , using d3js tween animate change between paths.

for example, counting 1 -> 9,0 , repeating.

http://jsfiddle.net/chrisloughnane/hl2et/

as can see of transitions not nice others. draw line closes path next path. (i'm guessing that) happens when start , end of path far apart when calculation new shape made. when works it's nice.

could suggest possible solution ugly lines?

code without path data

svg.append("path")     .attr("transform", "translate(150,300)scale(.2,-.2)")   .style("stroke", "red")   .style("fill", "gray")   .style("stroke-width", "9")     .attr("d", d0)     .call(transition, digits[0], digits[position]);  function transition(path, d0, d1) {   position++;   if(position==10)   {     position=0;   }   path.transition()       .duration(2000)       .attrtween("d", pathtween(d1, 4))       .each("end", function() { d3.select(this).call(transition, d1, digits[position]); }); }  function pathtween(d1, precision) {   return function() {     var path0 = this,         path1 = path0.clonenode(),         n0 = path0.gettotallength(),         n1 = (path1.setattribute("d", d1), path1).gettotallength();      // uniform sampling of distance based on specified precision.     var distances = [0], = 0, dt = precision / math.max(n0, n1);     while ((i += dt) < 1) distances.push(i);     distances.push(1);      // compute point-interpolators @ each distance.     var points = distances.map(function(t) {       var p0 = path0.getpointatlength(t * n0),           p1 = path1.getpointatlength(t * n1);       return d3.interpolate([p0.x, p0.y], [p1.x, p1.y]);     });      return function(t) {       return t < 1 ? "m" + points.map(function(p) { return p(t); }).join("l") : d1;     };   }; } 

unfortunately fails on chrome mobile http://bl.ocks.org/mbostock/3081153 works fine.

the next step apply effect sentences.

the difference between example , in bostock's in example there single continuous path tweens single continuous path.

whereas, in example, digits 1, 2, 3, 5, 6, 7 can drawn using single continuous path. but, in order draw digits 4, 6, 9 , 0 need 2 paths- 1 on top of other. and, digit 8, need have 2 paths on top of outer path.

so, suggestion keep 2 paths @ times atop outer path using @ present & give them appropriate dimensions whenever peculiar digit shown.

refer image more details: