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上时，条形图会以其所需长度为动画。显然，使用鼠标悬停事件并不是最可靠的方法，因此我正在寻找其他可能有用的方法。

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

提前感谢您的帮助！

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); });

        }});

大部分内容都可以通过图形滚动文档找出，但是使它适用于我的部分是.on（＆＃34; active＆＃34;）部分中的函数 - 我让它检查ID = containerID的div中的相关解释性文本。一旦图形滚动认为它处于活动状态，该功能将检查＆＃34; graph-scroll-active＆＃34;课程已被应用。如果有，那么过渡就会发生。

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>

D3.js：当一个部分在视图中时开始动画

2 个答案: