开发笔记:如何增强D3.js的“平滑滚动”演示？

篇首语：本文由编程笔记#小编为大家整理，主要介绍了如何增强D3.js的“平滑滚动”演示？相关的知识，希望对你有一定的参考价值。

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

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