D3 js六角形進捗アニメーション開始点

進捗アニメーションの六角形の始点を設定する方法をお手伝いしたいと思います。私のスクリーンショットに基づいて私の問題は、私のコードは常に六角形の最初の半分から始まるということです。D3 js六角形進捗アニメーション開始点

私は六角形のデータを変更しようとしましたが、問題はまだアニメーションの正しい開始点にありません。

私のコードは何が間違っているかを確認することができます。そして、事前に感謝します。

<html> 
 
<head> 
 
<title>Demo</title> 
 

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

 
<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> 
 

 
<script> 
 
/*https://codepen.io/MarcBT/pen/wcLCe/*/ 
 
var h = (Math.sqrt(3)/2.2), 
 
    radius = 100, 
 
    xp = 200, 
 
    yp = 200, 
 
    
 

 

 
    hexagonData = [ 
 

 

 
    { "x": (radius/2+xp) , "y": (-radius*h+yp)}, 
 
    { "x": -radius/2+xp, "y": -radius*h+yp}, 
 
    { "x": -radius+xp, "y": yp}, 
 
    { "x": -radius/2+xp, "y": radius*h+yp}, 
 
    { "x": radius/2+xp, "y": radius*h+yp}, 
 
    { "x": radius+xp, "y": yp}, 
 
    ]; 
 

 

 

 
drawHexagon = 
 
    d3.svg.line() 
 
     .x(function(d) { return d.x; }) 
 
     .y(function(d) { return d.y; }) 
 
     .interpolate("cardinal-closed") 
 
     .tension(".1") 
 

 

 
var svgContainer = 
 
    d3.select("body") 
 
     .append("svg") 
 
     .attr("width", 600) 
 
     .attr("height", 600); 
 

 

 

 
var svgContainer = d3.select("#animation") //create container 
 
    .append("svg") 
 
    .attr("width", 1000) 
 
    .attr("height", 1000); 
 

 
var path = svgContainer.append('path') 
 
\t .attr('d', drawHexagon(hexagonData)) 
 
    //.attr('d',line(pointData)) 
 
    .attr('stroke', "#E2E2E1") 
 
    .attr('stroke-width', '4') 
 
    .attr('fill', 'none'); 
 

 

 

 

 

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

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

 

 

 
var path1 = svgContainer.append('path') 
 
\t .attr('d', drawHexagon(hexagonData)) 
 
    .attr('stroke', "green") 
 
    .attr('stroke-width', '4') 
 
    .attr('fill', 'none'); 
 

 
var totalLength = path1.node().getTotalLength(); 
 
var percent = -30; 
 

 
//console.log(totalLength); 
 
path1 
 
    .attr("stroke-dasharray", totalLength + " " + totalLength) 
 
    .attr("stroke-dashoffset",totalLength) 
 
    // .attr("fill", "rgba(255,0,0,0.4)") 
 
    .transition() 
 
    .duration(2000) 
 
    
 
    .attr("stroke-dashoffset", ((100 - percent)/100) *totalLength) 
 

 

 

 

 

 

 

 

 
</script> 
 
</body> 
 
</html>

出典

2017-06-13 frogcoder

ここで何をしようとするのフィドルです：https://jsfiddle.net/udsnbb5m/2/

アニメーションは、あなたの六角形の最初のポイントから開始されます。しかし、あなたのポイントはあなたの六角形の頂点ではありません。次のように変更できます。

d3.svg.line() 
    .x(function(d) { return d.x; }) 
    .y(function(d) { return d.y; }) 
    .interpolate("cardinal-closed") 
    .tension("0.90") // Previously 0.1

さて、アニメーションが正しく開始されます。

ここで、六角形の向きを変更する必要があります。ポイントの座標を直接変更することができます。あなたはおそらく、この属性でそれを行うことができます（それは私がやったことだ）

hexagonData = [ 

    { "x": xp, "y": -radius+yp}, //5 
    { "x": -radius*h+xp , "y": -radius/2+yp}, //4 
    { "x": (-radius*h+xp) , "y": (radius/2+yp)}, //3 
    { "x": xp , "y": radius+yp}, //2 
    { "x": radius*h+xp , "y": radius/2+yp}, //1 
    { "x": radius*h+xp , "y": -radius/2+yp}, //6 

];

注：

.attr('transform','rotate(-45)');

出典

2017-06-13 12:33:41

ヘルプメイトをありがとう – frogcoder

D3 js六角形進捗アニメーション開始点

答えて

関連する問題