d3js - 2条路径之间的转换

Question

我正在尝试用相同数量的段补间2条路径。我使用的迈克·博斯托克这里介绍的方法：https://gist.github.com/mbostock/3916621：

svg.append("path") 
    .attr("transform", "translate(180,150)scale(2,2)") 
    .attr("d", d0) 
    .call(transition, d0, d1); 

function transition(path, d0, d1) { 
    path.transition() 
     .duration(2000) 
     .attrTween("d", pathTween(d1, 4)) 
     .each("end", function() { d3.select(this).call(transition, d1, d0); }); 
} 

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://jsfiddle.net/2brqoo5p/1/ 2路径具有相似的形状，但补间比它可能要复杂得多。有没有办法来解决这个问题？

非常感谢

Answer 1

恕我直言...

你可能会找不到任何公用事业/ libaries /等，会为你做到这一点。你会 必须写你自己的。或等待有人为你做。或者付钱给别人。

我可以想象这个问题的唯一解决方案是相当乏味的。如果我找到时间 ，我可能会写一个演示并更新这个答案。没有承诺， 虽然。事实上，这个代码似乎对链接中的演示 等闭环很有用。

这是伪代码的想法。不过，这是相当强大的力量。

# convert both SVG path `d` attributes from strings to arrays of points 
list_1 = convert('#path1') 
list_2 = convert('#path2') 

min_dist = 9999 
min_pt_set = {} 

for each point in list_1 -> (p1) 
    for each point in list_2 -> (p2) 
     # find the pair of points with the least distance between them 
     if (min_dist > dist(p1, p2)) 
      min_dist = dist(p1, p2) 
      min_pt_set = {p1, p2} 

# reorder list_1 so that p1 is the first element. 
# reorder list_2 so that p2 is the first element. 

# convert both lists back into svg path strings 

# write the path strings back to the svg `d` attributes. 

重新排序后，您可能需要某种方向检查。如果路径 定义为相反的方向，则可能需要将 的操作颠倒一条路径。

我不知道任何算法，将适用于所有情况。你选择 将可能取决于你编码的情况。您可以尝试'最少 平方和'或者可能只是检查与p1和p2相邻的点并解决最小距离 。

我希望有人比我有更好的解决方案。这是一个有趣的 问题。

另请参见：

1. http://www.w3.org/TR/SVG/paths.html
2. Scripting <path> data in SVG (reading and modifying) - 提到解析SVG路径的方法。