異なる数のデータポイントを持つパス間の遷移

Question

d3を使用して、データポイントの数が異なる2つの線の間にアニメーションを作成しようとしています。

私はMike Bostockの投稿：https://bl.ocks.org/mbostock/3916621を参照しています。これには、 "M0 ..."形式で記述された2つのパスのpathTweenメソッドが含まれています。

私がプロットしようとしているデータは生データポイントです。例えば ：

var line = d3.svg.line().interpolate("monotone") 
    .x(function(d){ return d.x; }) 
    .y(function(d){ return d.y; }); 

low_res = [ 
    {x: 0  , y: 4 }, 
    {x: 5  , y: 14 }, 
    {x: 10 , y: 11 }, 
    {x: 85 , y: 14 }, 
    {x: 90 , y: 11 }, 
    {x: 95 , y: 7 }, 
    {x: 100 , y: 4 }, 
    ]; 
    var high_res = [[ 
    {x: 0  , y: 4 }, 
    {x: 1  , y: 12 }, 
    {x: 2  , y: 11 }, 
    {x: 3  , y: 11 }, 
    {x: 4  , y: 14 }, 
    {x: 5  , y: 14 }, 
    {x: 6  , y: 12 }, 
    {x: 7  , y: 4 }, 
    {x: 8  , y: 3 }, 
    {x: 9  , y: 1 }, 
    {x: 10 , y: 11 }, 
    {x: 11 , y: 11 }, 
    {x: 12 , y: 1 }, 
    {x: 13 , y: 13 }, 
    {x: 14 , y: 1 }, 
    {x: 15 , y: 5 }, 
    {x: 16 , y: 13 }, 
    {x: 17 , y: 10 }, 
    ]] 
    var lines = svg.selectAll(".line").data(high_res) 
      .enter() 
      .append("path") 
      .attr("class","line") 
      .attr("d", line) 
      .style("stroke", "blue"); 

これはhigh_resプロットを表示するために見つけるに動作します。私はこのような遷移に渡すことができ、生データの私のセットからの第二の例ではD0、D1として、ネイティブのパスオブジェクトを作成する方法を見つけ出すのに苦労しています

var d0 = "M0,0c100,0 0,100 100,100c100,0 0,-100 100,-100", 
      d1 = "M0,0c100,0 0,100 100,100c100,0 0,-100 100,-100c100,0 0,100 100,100"; 
    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; 
      }; 
     }; 
    } 

を次のようにマイク・ボストックの例です。すなわち、：

.call(transition, d0, d1); 

アドバイスを事前に感謝します。

Answer 1

あなたの質問はまで煮詰めるようだ：どのように私は私のデータポイントのパスを生成することができます

？

これは実際に回線機能が実行していることです。それは同じくらい簡単です。このため

var low_res = [ 
 
    {x: 0 , y: 4 }, 
 
    {x: 5 , y: 14 }, 
 
    {x: 10 , y: 11 }, 
 
    {x: 85 , y: 14 }, 
 
    {x: 90 , y: 11 }, 
 
    {x: 95 , y: 7 }, 
 
    {x: 100 , y: 4 }, 
 
    ], 
 
    high_res = [ 
 
    {x: 0  , y: 4 }, 
 
    {x: 1  , y: 12 }, 
 
    {x: 2  , y: 11 }, 
 
    {x: 3  , y: 11 }, 
 
    {x: 4  , y: 14 }, 
 
    {x: 5  , y: 14 }, 
 
    {x: 6  , y: 12 }, 
 
    {x: 7  , y: 4 }, 
 
    {x: 8  , y: 3 }, 
 
    {x: 9  , y: 1 }, 
 
    {x: 10 , y: 11 }, 
 
    {x: 11 , y: 11 }, 
 
    {x: 12 , y: 1 }, 
 
    {x: 13 , y: 13 }, 
 
    {x: 14 , y: 1 }, 
 
    {x: 15 , y: 5 }, 
 
    {x: 16 , y: 13 }, 
 
    {x: 17 , y: 10 }, 
 
    ]; 
 
    
 
var line = d3.svg.line().interpolate("monotone") 
 
    .x(function(d){ return d.x; }) 
 
    .y(function(d){ return d.y; }); 
 
    
 
var d0 = line(low_res), 
 
    d1 = line(high_res); 
 
    
 
console.log(d0); 
 
console.log(d1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>