D3.js:在查看某个部分时启动动画

Question

我正在处理一个包含多个 D3 图表的页面，这些图表在用户向下滚动到页面的该部分之前是不可见的。这些图表有一些基本的动画，我只想在图表所在的部分进入 View 时才会出现。我唯一的幸运是当我在 div 上使用鼠标悬停事件时，图表就像这样:

d3.select("#chapter1_2")
  .on("mouseover", function() {

    svg.selectAll("rect.bar")
      .transition()
      .duration(1000)
      .attr("width", function(d) { return xScale(d.pct); })

  });

换句话说，当用户将鼠标移到#chapter1_2 div 上时，条形图会根据需要的长度进行动画处理。显然，使用鼠标悬停事件并不是最可靠的方法，因此我正在寻找其他可能有帮助的方法。

我试过使用图形滚动(https://1wheel.github.io/graph-scroll/)，但这并没有真正起作用，因为每个图表只发生一个转换，并且该转换会在章节/部分中的任何 div 时触发被归类为事件状态，这会在页面加载时立即发生。

在此先感谢您的帮助!

Answer 1

使用以下方法使其与图形滚动(https://1wheel.github.io/graph-scroll/)结合使用:

    var gs = graphScroll()
        .container(d3.select("#container"))
        .graph(d3.selectAll("#chart1_2))
        .sections(d3.selectAll("#chapters > div"))
        .on("active", function() { 
            if (document.getElementById(chapterID).className == "graph-scroll-active") {

                svg.selectAll("rect.bar")
                    .transition()
                    .duration(1000)
                    .attr("width", function(d) { return xScale(d.var3); });

        }});

其中大部分可以通过 graph-scroll 文档来解决，但对我有用的部分是 .on("active") 部分中的函数 - 我让它检查了ID = containerID 的 div。一旦 graph-scroll 认为它处于事件状态，该函数将检查是否已应用“graph-scroll-active”类。如果有，则转换会触发。