如何使用 d3.js 和 waypoints.js 库重置动画？

Question

我正在使用 d3.js (v3) 和 waypoints.js（scrollytelling 库）构建数据可视化。虽然当用户向下滚动时动画效果很好，但我希望我的动画重置一次/如果用户决定向上滚动。理想情况下，如果用户在动画完成之前/之后向上滚动，则数据可视化会完全重置并重新启动。

有人有同时使用这两个库的经验吗？

这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.js"> 
</script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"> 
</script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/shortcuts/sticky.min.js"> 
</script>

<div id="arcContainer">
 <div id="arcOne"></div>
</div>



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

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

 var svgContainer = d3.select("#arcContainer").append("svg")
  .attr("width", 2000)
  .attr('viewBox', viewbox);

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

 var arc = d3.svg.arc().outerRadius(995).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("id", "arcFirst")
      // .style("stroke", "rgb(53,154,204))")
      .style("stroke", "rgb(0,255,255)")
      .style("stroke-width", 5)
      .style("fill", "black") //"none"
      .style("opacity", 1)
      .attr('d', arc)
      .transition().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("id", "ballFirst")
    .transition()
    .delay(2000)
    .duration(2000)
    .attr('r', 20)
    .style("fill", "rgb(0,255,255)")
    .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                
        };
    })        
    .transition()
    .delay(4000)
    .duration(2000)
    .attr('r', 20)
    .style("fill", "rgb(0,255,255)")
    .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                
        };
    })        
 }


var waypointFour = new Waypoint({
  element: document.getElementById('arcContainer'),
  handler: function(direction) {
  renderOne(1000);
  },
  offset: '50%'
})

这是我的小提琴：

https://jsfiddle.net/bullybear/xLcvqjao/13/

Answer 1

我建议为重置和启动动画创建单独的函数，而不是为整个可视化创建一个函数。这样，您可以在条件合适时触发它们，使用waypoints 和为"free" 获得的direction 参数。您可以使用偏移值来找到平衡，以便在重置可视化感觉“自然”时找到平衡。

这是一个fiddle，其中包含一个更基本的示例，展示了具有多个航点的两种功能方法。