d3js how to scroll or tween properties

Question

I have a div, #scrollable, with a scrollbar and I want to scroll to the end. I can do it by setting the div's "scrollTop" property to the value of the div's "scrollHeight" property thus:

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

but I can't figure out how, if at all, I can tween it.

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

doesn't work.

Thanks for any ideas. Regards

score 8 · Answer 1 · answered May 03 '13 at 07:35

You can use a custom d3 tween to transition arbitrary properties like scrollTop.

mbostock's Smooth Scrolling example demonstrates using a custom tween to scroll the entire document.

And here is the example adapted to your context (also viewable interactively on 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); }; 
    }; 
}

d3js how to scroll or tween properties

1 Answers1