D3.js：当一个区域显示时开始动画

Question

我正在处理一个页面，该页面有几个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事件并不是最可靠的方法，因此我正在寻找其他可能有帮助的方法。

我尝试使用graph-scroll（https://1wheel.github.io/graph-scroll/），但这并不起作用，因为每个图表只有一个过渡，而且该过渡会在章节/部分中的任何div被分类为active时立即发生，这在页面加载时就会立即发生。

感谢您提前的帮助！

- skz87

---

为什么不使用scroll并检查图表偏移与滚动位置？ - Derek

谢谢您的建议！我实际上认为我已经成功地结合了graph-scroll来解决这个问题：现在我有一个函数，它检查所处的div是否具有“graph-active-scroll”类，当它存在时就会触发动画！ - skz87

太好了！请将您的解决方案添加为答案以供未来用户使用，或删除此问题。谢谢。 - Derek

Answer 1

使用以下方法成功与graph-scroll(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”类。如果是，则转换开始。

- skz87

Answer 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>

- maaniB