在d3中，是否可以动态更改路径位置开始补间的位置？

为：澄清。画一个圆圈。我们开始从一个特定的坐标绘制圆。现在让我们从另一个坐标开始绘制圆。在d3中，是否可以动态更改路径位置开始补间的位置？

我正在玩从SVG字形导出的路径数据，然后使用d3js补间动画路径之间的变化。

对于本示例，从1 - > 9,0开始计数，然后重复。

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

正如你可以看到一些转变并不像你一样他人。他们绘制出一条关闭下一条路径的路线。（我猜测）这种情况发生在路径的开始和结束相隔很远时，新形状的计算已经完成。当它工作，这是非常好的。

有人可以建议一个可能的解决方案，以丑陋的线？

代码，而无需路径数据

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罚款。

下一步是将此效果应用于句子。

来源

2013-05-09 chris loughnane

嗯有趣的问题。看起来像需要一个更好的算法来匹配内插中的p0和p1点。你可能想尝试Gale-Shapley来匹配基于欧几里德距离的点。我认为最好的算法是优先考虑两点之间的插值，而不会导致任何交点。不知道该怎么做。 – 2014-02-09 14:12:09