scroll - d3js如何滚动或补间属性

Question

我有一个带有滚动条的 div #scrollable，我想滚动到最后。我可以通过将 div 的“scrollTop”属性设置为 div 的“scrollHeight”属性的值来做到这一点：

var scrollable = d3.select("#scrollable");
scrollable.property("scrollTop", scrollable.property("scrollHeight"));

但我不知道如何，如果有的话，我可以补间它。

var scrollheight = scrollable.property("scrollHeight");
d3.select("#scrollable").transition().property("scrollTop", scrollheight);

不起作用。

感谢您的任何想法。问候

Answer 1

您可以使用自定义d3 补间来转换任意属性，例如scrollTop.

mbostock 的平滑滚动示例演示了使用自定义补间来滚动整个文档。

这是适应您的上下文的示例（也可以在 bl.ocks.org 上以交互方式查看）：

var scrollable = d3.select("#scrollable"); 

d3.select("#down").on('click', function() { 
    var scrollheight = scrollable.property("scrollHeight"); 
    d3.select("#scrollable").transition().duration(3000) 
        .tween("uniquetweenname", scrollTopTween(scrollheight)); 
}); 

function scrollTopTween(scrollTop) { 
    return function() { 
        var i = d3.interpolateNumber(this.scrollTop, scrollTop); 
        return function(t) { this.scrollTop = i(t); }; 
    }; 
}