5

明確にするために。円をイメージしてください。特定の座標から円を描き始めます。別の座標から始まる円を描いてみましょう。

SVGグリフから派生したパスデータで遊んでから、d3jsトゥイーンを使用してパス間の変化をアニメーション化しています。

この例では、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が正常に動作する Chrome モバイルでも失敗します。

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

4

1 に答える 1

1

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

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

したがって、私の提案は、現在使用している外側のパスの上に常に 2 つのパスを保持し、固有の数字が表示されるたびに適切な寸法を与えることです。

詳細については、画像を参照してください。 ここに画像の説明を入力

于 2014-03-25T06:45:27.100 に答える