d3では、トゥイーンのパス位置を動的に変更することは可能ですか？

Question

に：明確にする。円を描く。特定の座標から円を描き始めます。今度は別の座標から始まる円を描きましょう。

私はSVGグリフから派生したパスデータを再生していて、d3js tweenを使用してパス間の変更をアニメートしています。

この例では、1から9,0まで数えてから繰り返します。

http://jsfiddle.net/chrisloughnane/HL2ET/

あなたがトランジションの一部を見ることができるように

は、他の人のように素敵ではありません。次のパスのパスを閉じる線を描きます。 （私はそれを推測しています）これは、新しい形状の計算が行われたときに、パスの開始点と終了点が非常に離れている場合に発生します。それが動作するとき、それはとてもいいです。

醜い行に誰かが解決策を提案できますか？パスデータなし

CODEは

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], i = 0, dt = precision/Math.max(n0, n1); 
    while ((i += dt) < 1) distances.push(i); 
    distances.push(1); 

    // Compute point-interpolators at 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; 
    }; 
    }; 
} 

残念ながらそれはhttp://bl.ocks.org/mbostock/3081153が正常に動作としてあまりにもクロームモバイルに失敗しました。

次のステップは、この効果を文章に適用することです。

Answer 1

あなたの例とBostockの例の違いは、彼の例では、別の単一の連続したパスにトゥイーンする単一の連続したパスがあることです。

一方、あなたの例では、1、2、3、5、6,7のような数字は、単一の連続したパスを使用して描くことができます。しかし、4,6,9、および0のような数字を描画するには、2つのパスが必要です。また、数字の8の場合は、外側のパスの上に2つのパスが必要です。

私の提案は、現在使用している外側のパスの上に常に2つのパスを維持することです。&は、任意の桁が表示されるたびに適切な寸法を与えます。