如何增强D3.js的“平滑滚动”演示？

Posted 2021-03-30

js人，

我正在看这个演示：

http://bl.ocks.org/mbostock/1649463

它显示了一种“平滑滚动”技术，可以滚动到页面的末尾。

如何增强它以便滚动到id或选择？

我想创建一个名为slowscroll（）的函数。

我希望API调用看起来像这样：

d3.select('#mybutton')
  .on('click',function(){
    slowscroll(mydelay, myduration, '#stophere');});

答案

你可以做这样的事情来停止按钮点击并从那里恢复。

//add listener to stop
d3.select("#stop").on("click", function () {
    //stop the transition
    d3.select("body").transition().duration(0);
});
//add listeners to resume
d3.select("#resume").on("click", function () {
    //resume the transition
    d3.select("body").transition()
    .delay(1)
    .duration(7500)
    .tween("scroll", scrollTween(document.body.getBoundingClientRect().height - window.innerHeight));
});

完整的工作代码here。

另一答案

而不是一直到最后你可以计算偏移量

var offset = $(selector).offset().top - window.scrollY;

然后在函数中使用它

function scrollToElem(delay, duration, selector){
var offset = $(selector).offset().top - window.scrollY;

d3.transition()
    .delay(1500)
    .duration(7500)
    .tween("scroll", scrollTween(offset));

}

事件绑定

d3.select('#my-button')
.on('click',function(){
scrollToElem(1500, 7500, '#target');});

这里是完整的代码https://jsfiddle.net/mddm8xxt/2/