フレックスボックスdiv内にあるD3 SVGツリーをプログラムでスクロールするにはどうすればよいですか？

Question

フレックスボックス内に大きなSVGエリアがあるD3ツリーがあり、「オーバーフロー：自動」でツリーをパン/スクロールできます。ツリーのノードは左のdivにリストされています。私がリストをクリックすると、d3.select（ "[id = '" + nodeName + "']"）、有効なD3選択肢があります。

ノードをコンテナの中央に移動するには、どうすればプログラムスクロールできますか？私はこれがHTML/DOMのものかD3のものか、その両方かどうかはわかりません。

Answer 1

は、私がこれを可能に答えままにしますが、それはハックのビットです。いくつかの注意点、あなたのユニットがピクセルに変換できない場合、あなたの要素の変形、またはあなたが拡大/変換されている場合、これはうまくいきません。クランプなどもする必要がありますが、ブラウザはチョークしません。

基本的には、SVGキャンバス上のピクセルスクロールウィンドウです。

Answer 2

だからあなたはそうのように、クリックでリスナーを置くことができます。

d3.select(element).on('click', function(d) { 
    centerNode(d); 
}); 

は、その後、あなたは一例につきとしてあなたcenterNode関数を定義することができますでしょうが、少なくとも中央

function centerNode(source) { 
    var x = -source.y0/2; 
    d3.select('g').transition() 
     .duration(400) 
     .attr('transform', 'translate(' + x + ',' + 0 + ')'); 
} 

を水平に。また、垂直にセンタリングする場合は、source.x0プロパティを使用し、translate関数の2番目のパラメータとして使用する必要があります。

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

それは仕事を取得します...