D3請幫我動畫這個六角形請

Question

我想動畫這個Hexagon的圖畫。第一次使用D3仍然試圖弄清楚它是如何工作的。

jsfiddle.net/p4ezs3ar/

Answer 1

動畫這是一種使用行程dasharray和中風dashoffset SVG屬性的絕招。

基本上你發現使用

var totalLength = path.node().getTotalLength(); 

然後創建一個虛線那是你的路徑的大小兩倍的線長，它的一半是虛線，其他空。

attr("stroke-dasharray", totalLength + " " + totalLength) 

最後，您將爲它製作動畫。從totalLength的大小開始。這是你的虛線的明確部分：

.attr("stroke-dashoffset", totalLength) 

末的0動畫，只讓虛線的填充部分所示：

.attr("stroke-dashoffset", 0) 

代碼片段：

var _s32 = (Math.sqrt(3)/2); 
 
var A = 55; 
 
var diff = 100; 
 
var pointData = [ 
 
    [105+diff, 10+diff], 
 
    [25+diff, 60+diff], 
 
    [25+diff, 150+diff], 
 
    [100+diff, 190+diff], 
 
    [175+diff,150+diff], 
 
    [175+diff,60+diff], 
 
    [95+diff, 10+diff] 
 
]; 
 
var svgContainer = d3.select("#animation") //create container 
 
    .append("svg") 
 
    .attr("width", 1000) 
 
    .attr("height", 1000); 
 
var line = d3.svg.line() 
 
\t .interpolate('linear') 
 
    .x(function(d,i) { return d[0];}) 
 
    .y(function(d) { return d[1];}); 
 
    
 
var path = svgContainer.append('path') 
 
\t .attr('d', line(pointData)) 
 
    .attr('stroke', '#92c8a1') 
 
    .attr('stroke-width', '22') 
 
    .attr('fill', 'none'); 
 

 
var totalLength = path.node().getTotalLength(); 
 

 
path 
 
    .attr("stroke-dasharray", totalLength + " " + totalLength) 
 
    .attr("stroke-dashoffset", totalLength) 
 
    .transition() 
 
    .duration(2000) 
 
    .ease("linear") 
 
    .attr("stroke-dashoffset", 0); 
 

 
svgContainer.on("click", function(){ 
 
    path  
 
    .transition() 
 
    .duration(2000) 
 
    .ease("linear") 
 
    .attr("stroke-dashoffset", totalLength); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script> 
 

 
<div id="animation"></div>