Я хотел бы обратиться за помощью, как установить начальную точку формы шестиугольника в процессе анимации. Основываясь на моем снимке экрана, моя проблема в том, что мой код всегда начинается с первой половины формы шестиугольника.
Я попытался изменить свои данные по шестиугольнику, но проблема все еще не в правильной начальной точке анимации.
Вы можете проверить мой код ниже того, что неправильно. И спасибо заранее.
<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>
Вот сценарий того, что вы пытаетесь сделать: 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)');