d3.jsscrollpanning

d3.tree scrollbar instead of panning

I have a tree width d3.js. when tree overflows svg, it is hidden and I can view hidden parts by panning on tree. is there any way to add scrollbar for view hidden parts instead of panning? for example in this sample http://bl.ocks.org/robschmuecker/7880033 I want to add scroll bar to this tree. this sample is not what I want: https://bl.ocks.org/CrandellWS/ca7e6626c9e6b1413963 because in this example when we collapse nodes, scrollbar size not change.

Solution

  • You can get the svg bounding box using svg.getBBox(), where svg is your svg node, e.g. 

    let svg = document.getElementsByTagName("svg")[0];
let box = svg.getBBox()

    and then use box.x, .y, .width and .height to calculate the correct viewBox attribute value, width and height.