Попытка анимировать круг вдоль пути ar c в D3. js (v3) - PullRequest
Новая
       97

Попытка анимировать круг вдоль пути ar c в D3. js (v3)

1 голос
/ 13 июля 2020

Я пытаюсь оживить круг по пути ar c. Ссылка ниже дает хороший пример того, что я пытаюсь сделать (за исключением того, что путь в примере не является ar c).

http://bl.ocks.org/JMStewart/6455921

У меня есть следующий блок кода, который строит ar c, к которому я хотел бы добавить круг. 

function renderOne(innerRadius) {

  var width = 1250,
    height = 1250,
    colors = d3.scale.category20();

  var svg = d3.select("#arcOne").append("svg")
    .attr("height", height)
    .attr("width", width);

  var dataArc = [
    {startAngle: -0.5 * Math.PI, endAngle: 0.5 * Math.PI},
  ];


  var arc = d3.svg.arc().outerRadius(625).innerRadius(innerRadius);
    svg.select("g").remove();
    svg.append("g")
      .attr("transform", "translate(625,625)")
      .selectAll("path.arc")
        .data(dataArc)
        .enter()
        .append("path")
        .attr("class", "arc")
        .style("stroke", "rgb(53,154,204))")
        .style("stroke-width", 5)
        .style("fill", "black") //"none"
        .style("opacity", .7)
        .transition().duration(2000)
        .attrTween("d", function (d) {
            var start = {startAngle: -0.5 * Math.PI, endAngle: -0.5 * Math.PI} // <-A
            var interpolate = d3.interpolate(start, d); // <-B
            return function (t) {
                return arc(interpolate(t)); // <-C
            };
        })
}

renderOne(1250);
#arcOne {
  position: absolute;
  top: 50px;
  left: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div id="arcOne"></div>

Любая помощь будет безмерно признательна. У меня такое чувство, что мне нужно будет как-то использовать d3.svg.ar c (), но я не смог разобраться с этим должным образом.

1 Ответ

1 голос
/ 14 июля 2020

Это то, что вы хотите?

enter image description here

See code to achieve that below and here: https://jsfiddle.net/alexander_L/y2vscpx1/2/

function renderOne(innerRadius) {
  
  var dbl = innerRadius * 2;
  var width = "100%", //1250,
    viewbox = `0 0 ${dbl} ${dbl}`,
    height = "100%", //1250,
    colors = d3.scale.category20();

  var svg = d3.select("body").append("svg")
    //.attr("height", height)
    .attr("width", width)
    .attr('viewBox', viewbox);

  var dataArc = [
    {startAngle: -0.5 * Math.PI, endAngle: 0.5 * Math.PI},
  ];


  var arc = d3.svg.arc().outerRadius(625).innerRadius(innerRadius);
  
  svg.select("g").remove();
    
  var path = svg.append("g")      
      .selectAll("path.arc")
        .data(dataArc);
        
      path.enter()
        .append("path")
          .attr("transform", `translate(${innerRadius},${innerRadius})`) //625,625
          .attr("class", "arc")
          .style("stroke", "rgb(53,154,204))")
          .style("stroke-width", 5)
          .style("fill", "black") //"none"
          .style("opacity", .7)
          .attr('d', arc)
          .transition().delay(250).duration(2000).ease("linear")
          .attrTween("d", function (d) {
              var start = {startAngle: -0.5 * Math.PI, endAngle: -0.5 * Math.PI} // <-A
              var end = d // {startAngle: -0.5 * Math.PI, endAngle: 0.5 * Math.PI}
              var interpolate = d3.interpolate(start, end); // <-B
              return function (t) {
                  return arc(interpolate(t)); // <-C
              };
          })
          
    path.enter()
      .append('circle')
        .attr("transform", `translate(${innerRadius},${innerRadius})`) //625,625
        //.attr("cx", d => arc.centroid(d)[0]) // Set the cx
                //.attr("cy", d => arc.centroid(d)[1])
        .attr('r', 20)
        .attr('fill', 'black')
        .transition()
        .delay(250)
        .duration(2000)
        .ease("linear")
        .attrTween("pathTween", function (d) {
            const startAngle = d.startAngle;
            const endAngle = d.endAngle;
            const start = {startAngle, endAngle: startAngle} // <-A
            const end = {startAngle: endAngle, endAngle}
            //console.log(start,end)
            const interpolate = d3.interpolate(start, end); // <-B
            const circ = d3.select(this) // Select the circle
            return function (t) {
                const cent = arc.centroid(interpolate(t)); // <-C         
                //return cent[0]
                circ
                  .attr("cx", cent[0]) // Set the cx
                  .attr("cy", cent[1]) // Set the cy                
            };
        })        
}

renderOne(750);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
...