Начальная точка анимации прогресса шестиугольника D3 js

Question

Начальная точка анимации прогресса шестиугольника D3 js

1

Я хотел бы обратиться за помощью, как установить начальную точку формы шестиугольника в процессе анимации. Основываясь на моем снимке экрана, моя проблема в том, что мой код всегда начинается с первой половины формы шестиугольника.

Я попытался изменить свои данные по шестиугольнику, но проблема все еще не в правильной начальной точке анимации.

Вы можете проверить мой код ниже того, что неправильно. И спасибо заранее.

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

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

<script src="/jquery.min.js"></script>
<script src="/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>

frogcoder 13 июнь 2017, в 10:28

Источник

Теги:

javascript

d3.js

1 ответ

Ещё вопросы

Frederic Kuhner · Accepted Answer · 2017-06-13T10-00-00.000Z

Вот сценарий того, что вы пытаетесь сделать: 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)');