Question

我想寻求帮助如何在进度动画中设置六边形的起点。根据我的截图，我的问题是我的代码总是从六边形的前半部分开始。

我试图更改我的六边形数据，但问题仍未出现在动画的正确起点上。

您可以在下面检查我的代码是什么问题。并提前感谢。

<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')
	.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')
	.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>

Answer 1

这是你要做的事情的小提琴：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)');

D3 js六角形进度动画起点

1 个答案: