Question

我有一个使用d3.js制作的图表：

我已将此图表放在网站中。

问题是在上面的网站中，当你滚动页面到“teamchart”部分时，我看不到图表的效果。刷新页面时，您可以看到图表角色效果。

我希望图表显示角色并显示效果，当我到达页面的该部分或使用导航栏时，单击“teamchart”并到达该部分。

我使用了以下JavaScript代码，但它不断重复：

"General": {
        "None": [
            {
                "FieldName": "100",
                "DisplayName": "Mapping Name",
                "ClassSize": "col-sm-6 col-xs-12",
                "Field": [
                    {
                        "ControlType": "TextBox",
                        "FieldClass": "col-sm-6 col-xs-12",
                        "Required": "True",
                        "MaxLength": "10",
                        "RegularExpression": ""
                    }
                ]
            },
            {
                "FieldName": "101",
                "DisplayName": "Select Target File Type",
                "ClassSize": "col-sm-6 col-xs-12",
                "Field": [
                    {
                        "ControlType": "Dropdown",
                        "FieldClass": "col-sm-6 col-xs-12",
                        "Required": "True",
                        "Options": [
                            {
                                "Description": "--Please select--",
                                "ID": 0
                            },
                            {
                                "Description": "Row Per Day",
                                "ID": 1
                            },
                            {
                                "Description": "Row Per Week",
                                "ID": 2
                            },
                            {
                                "Description": "Row Per Transaction",
                                "ID": 3
                            }
                        ]
                    }
                ]
            }
        ]
    }

与网站相关的小提琴：

My code related to website（在此实验）

Answer 1

据我所知，你的问题是动画一直在播放的部分。

这是因为每次滚动页面时，大于500的值，实际上都是在重复代码。

简单的解决方案：放置一个标志以表示已经动画＆＃39;

var g_pieChartAnimated=false;

$(document).scroll(function() {
  //Basically your position in the page
  var x = $(this).scrollTop();
  //How far down (in pixels) you want the user to be when the effect to starts, eg. 500
  var y = 500;
  if (!g_pieChartAnimated && (x > y)) {
      g_pieChartAnimated = true;
      //Put your effect functions in here.
  }
});

第二种解决方案（更快）：
是一旦它做了你想要的事情就分离事件处理程序。

function onScroll_AnimateChart() {
  //Basically your position in the page
  var x = $(this).scrollTop();
  //How far down (in pixels) you want the user to be when the effect to starts, eg. 500
  var y = 500;
  if (!g_pieChartAnimated && (x > y)) {
      $(document).off('scroll', onScroll_AnimateChart); // remove myself from the event handlers, so it won't be called again.
      //Put your effect functions in here.
  }
}

$(document).on('scroll', onScroll_AnimateChart);

Answer 2

修改我错过了你说动画重复的地方 - @Tomer W解决方案是正确的。

与@Tomer W发布的内容类似，但在scroll handler中运行图表功能（或图表中的任何功能触发动画）：

var chartInit = false; var handler = function() { var y = 500; var x = $(this).scrollTop(); if (x > y && !charInit) { charInit = true; someD3ChartStuff(); } }; $(document).scroll(handler);

Answer 3

我为您的问题提供以下两种解决方案，希望它有所帮助！

1 - 纯css + jQuery解决方案

$(window).on('scroll' , function(){
    scroll_pos = $(window).scrollTop() + $(window).height();
    element_pos = $(".chart-wrapper").offset().top + $(".chart-wrapper").height() ;
    if (scroll_pos > element_pos) {
        $(".chart-wrapper").addClass('animation');
    };
})

然后在课程animation

中操纵你的动画

2- Wow.JS Library

1-下载脚本here
2-下载animate.css here
3-以此片段为例，了解其工作原理

<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
<link rel="stylesheet" href="css/animate.css">
<script>
new WOW().init();
</script>


<div class="wow bounceInLeft animated">
              <h2>animated heading</h2>
</div>

Obs。：你可以使用这个库+ animate.css的一堆动画只使用下面的任何一个类并将类wow也放在

这是列表

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

仅在网站中到达该部分时显示效果

3 个答案:

1 - 纯css + jQuery解决方案

2- Wow.JS Library