D3.JS：線をアニメートする方法

Question

D3の新機能では、線の翻訳（アニメーション）に関する質問があります。私は円が次のコードを使用してアニメーション化：特に

var data = d3.range(100).map(function() { 
    return new agent(
     0, 
     0, 
     (Math.random()-0.5)*.05, 
     (Math.random()-0.5)*.05, 
     'rgb(255, 0, 213)'); 
}); 

var circles = canvas.selectAll('circle') 
     .data(data) 
     .enter().append('circle') 
     .attr('cx', function(d) { 
      return d.x; 
     }) 
     .attr('cy', function(d) { 
      return d.y; 
     }) 
     .attr('r', 5) 
     .attr('fill', function(d) { 
      return d.color; 
     }); 

circles.attr('transform', function(d) { 
    return 'translate(' + d.x + ',' + d.y + ')'; 
}); 

最後の3行は私に興味がある - ラインの等価translateありますか？

Answer 1

D3の線をアニメーション化するためのいくつかのオプションがあります。

基礎となるデータを変更する

svg.select(".line") 
    .duration(animationLength) 
    .attr("d", valueline(lineData)) 

valueLineはd3.svg.line()機能です。

ラインを移動するtransformを使用stroke-dashoffset

var lineGraph = svg.append("path") 
    .attr("class", "line") 
    .attr("d", lineFunction(lineData)) 
    .attr("stroke-dasharray", 200 + " " + 200) 
    .attr("stroke-dashoffset", 200) 
    .attr("fill", "none") 
    .transition() 
    .duration(animationLength) 
    .ease("linear") 
    .attr("stroke-dashoffset", 0); 

を介して、最初から最後までの行を充填

svg.select(".line") 
    .duration(animationLength) 
    .attr("transform", "translate(" + 100 * Math.random() + "," + 100 * Math.random() + ")"); 

var animationLength = 2000; 
 
var lineData = [{ 
 
    "x": 1, 
 
    "y": 5 
 
}, { 
 
    "x": 20, 
 
    "y": 20 
 
}, { 
 
    "x": 40, 
 
    "y": 10 
 
}, { 
 
    "x": 60, 
 
    "y": 40 
 
}, { 
 
    "x": 80, 
 
    "y": 5 
 
}, { 
 
    "x": 100, 
 
    "y": 60 
 
}]; 
 
var lineFunction = d3.svg.line() 
 
    .x(function (d) { 
 
     return d.x; 
 
    }) 
 
    .y(function (d) { 
 
     return d.y; 
 
    }) 
 
    .interpolate("linear"); 
 

 
var valueline = d3.svg.line() 
 
    .x(function (d) { 
 
     return d.x * (Math.random() + 0.5); 
 
    }) 
 
    .y(function (d) { 
 
     return d.y * (Math.random() + 0.5); 
 
    }); 
 

 
var svg = d3.select("#line") 
 
    .append("svg") 
 
    .attr("width", 200) 
 
    .attr("height", 200); 
 

 
var lineGraph = svg.append("path") 
 
    .attr("class", "line") 
 
    .attr("d", lineFunction(lineData)) 
 
    .attr("stroke", "blue") 
 
    .attr("stroke-width", 2) 
 
    .attr("stroke-dasharray", 200 + " " + 200) 
 
    .attr("stroke-dashoffset", 200) 
 
    .attr("fill", "none") 
 
    .transition() 
 
    .duration(animationLength) 
 
    .ease("linear") 
 
    .attr("stroke-dashoffset", 0); 
 

 
svg = d3.select("body").transition(); 
 

 
svg.select(".line") 
 
    .delay(animationLength) 
 
    .duration(animationLength) 
 
    .attr("d", valueline(lineData)) 
 
    .attr("transform", "translate(" + 100 * Math.random() + "," + 100 * Math.random() + ")");

<script src="https://d3js.org/d3.v3.min.js"></script> 
 
<div id="line"></div>