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六角进度动画开始点

回答

相关问题