Q:

How do I programmatically scroll a D3 SVG tree sitting inside a flex box div?

I have a D3 tree with a large SVG area sitting inside a flex box with "overflow:auto" allowing the user to pan/scroll the tree. The nodes of the tree are in a list in a div to the left. When I click the list I d3.select("[id='" + nodeName + "']") and have a valid D3 selection.
How can I programmatically scroll to bring the node into the center of it's container? I'm not sure if this is an HTML/DOM thing or a D3 thing or both.

A:

I will leave this an a possible answer but it's a bit of a hack...
    var y = node.__data__.x;
    var x = node.__data__.y;
    var contentElement = $("#content-area").get(0);
    var clientWidth = contentElement.clientWidth;
    var clientHeight = contentElement.clientHeight;
    var scrollWidth = contentElement.scrollWidth;
    var scrollHeight = contentElement.scrollHeight;
    var scrollX = ((x/svgWidth) * scrollWidth) - (clientWidth/2) ;
    var scrollY = ((y/svgHeight) * scrollHeight) - (clientHeight/2);
    $("#content-area").scrollLeft(scrollX);
    $("#content-area").scrollTop(scrollY);

It gets the job done. Some caveats, if your units not translatable to pixels, your have transformations on your elements or your zoomed/translated already this won't work. Also should do clamping, etc. but browser seems to not choke on it :-)
Basically it's a simple pixel to pixel scroll window over the SVG canvas.

