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

我有一个带有滚动条的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);

不起作用。

感谢您的任何想法。
问候

最佳答案

您可以使用自定义的d3 tween转换任意属性，例如scrollTop。

mbostock的Smooth Scrolling示例演示了如何使用自定义补间滚动整个文档。

以下是适合您的上下文的示例（也在bl.ocks.org上为viewable interactively）：

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