D3.js：当一个部分在视图中时启动动画答案

【问题标题】：D3.js: Starting animations when a section is in viewD3.js：当一个部分在视图中时启动动画
【发布时间】：2016-05-25 20:48:20
【问题描述】：

我正在处理具有多个 D3 图表的页面，这些图表在用户向下滚动到页面的该部分之前不可见。图表有一些基本的动画，我只想在图表所在的部分出现时才会出现。我唯一的运气是当我在图表所在的 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 上时，条形将动画到所需的长度。显然，使用 mouseover 事件不是最可靠的方法，所以我正在寻找其他可能有帮助的方法。

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

提前感谢您的帮助！

【问题讨论】：

为什么不使用scroll 并检查图表偏移与滚动位置？
感谢您的建议！我实际上认为我设法结合图形滚动解决了这个问题：我现在有一个函数可以检查它所在的 div 是否具有类“graph-active-scroll”，并且当它触发动画时!
太棒了！请添加您的解决方案作为未来用户的答案或删除此问题。谢谢。

标签： d3.js

【解决方案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); });

        }});

大部分内容都可以通过图形滚动文档来解决，但使它对我有用的部分是 .on("active") 部分中的函数 - 我让它检查了相关的解释性文本ID = containerID 的 div。一旦 graph-scroll 认为它处于活动状态，该函数就会检查是否已应用“graph-scroll-active”类。如果有，则转换触发。

【讨论】：

【解决方案2】：

我认为使用 jquery 可以更可靠地实现它：

$(document).ready(function () {
function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        var elemID = $(elem).attr("id");
        var elemTag = $(elem).prop("tagName");

        return elemTop <= docViewBottom &&
            elemBottom >= docViewTop &&
            elemTag == "svg"
            ? elemID
            : false;
    }

    $(window).scroll(function () {
        $("svg").each(function () {
            var ele = isScrolledIntoView(this);
            if (ele) {
                var ele_ = ele.replace(/-/g, "_");

                var fn = eval(ele_);
                var checkEle = $("#" + ele).attr("data-enable");

                if (!checkEle) {
                    //   console.log(ele);
                    $(this).attr("data-enable", "true");
                    setTimeout(() => {
                        fn();
                    }, 300);
                }
            }
        });
    });
    // function that starts drawing d3 chart 
function id_of_svg() { // id name written with underlines
   // d3 codes 
}

}

<div class="chart">
     <svg id="id-of-svg" width="100%" height="400"></svg>
</div>

【讨论】：