尝试在 D3.js (v3) 中沿圆弧路径为圆设置动画

Question

我正在尝试沿弧形路径为圆设置动画。下面的链接给出了我正在尝试做的一个很好的例子（除了例子中的路径不是弧线）。

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

我有以下代码块，它构建了我想将圆附加到的弧。

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.arc() 但我无法正确解决它。

Answer 1

这是你想要的吗？

请参阅下面和此处的代码以实现此目的：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>