D3はどのようにスケールを変換しながら、要素と同じサイズを維持するために/

Question

を変換この例では、私の問題を示していますhttps://bl.ocks.org/feketegy/ce9ab2efa9439f3c59c381f567522dd3

私はグループ要素内のパスのカップルを持っていると私はパン/青い四角形のパスを除いて、これらの要素を拡大したいですこれは別のグループ要素にあります。

ズームとパンニングは、transform="translate(0,0) scale(1)を最も外側のグループ要素に適用し、ズームデルタをキャプチャして、それを同じサイズに維持するためにグループ要素に適用して行います。

これは動作していますが、同じサイズの青い矩形の位置がうまくいけば、それを他のパスと同じ相対位置に保ちたいと思います。

<svg width="100%" height="100%"> 
    <g class="outer-group" transform="translate(0,0)scale(1)"> 
    <path d="M100,100 L140,140 L200,250 L100,250 Z" fill="#cccccc" stroke="#8191A2" stroke-width="2px"></path> 
    <path d="M400,100 L450,100 L450,250 L400,250 Z" fill="#cccccc" stroke="#8191A2" stroke-width="2px"></path> 

    <g class="same-size-position" transform="translate(300,250)"> 
     <g class="same-size" transform="scale(1)"> 
     <path d="M0,0 L50,0 L50,50 L0,50 Z" fill="#0000ff"></path> 
     </g> 
    </g> 
    </g> 
</svg> 

私はX/same-size-positionグループのY位置を取得し、outer-groupの翻訳のx/yからのデルタを作成しようとしたが、それ：

レンダリングされたHTMLの構造は次のようになります動作していないようです。

Answer 1

私の高校のジオメトリの本を粉砕した後、解決策が見つかりました。

あなたは、同じサイズを維持し、そのようにその上にマトリクス変換を計算したい要素のバウンディングボックスを取得する必要があります：

const zoomDelta = 1/d3.event.transform.k; 

const sameSizeElem = d3.select('.same-size'); 
const bbox = sameSizeElem.node().getBBox(); 

const cx = bbox.x + (bbox.width/2); 
const cy = bbox.y + (bbox.height/2); 
const zx = cx - zoomDelta * cx; 
const zy = cy - zoomDelta * cy; 

sameSizeElem 
    .attr('transform', 'matrix(' + zoomDelta + ', 0, 0, ' + zoomDelta + ', ' + zx + ', ' + zy + ')'); 

マトリックス変換は、要素の相対位置を維持しますどのサイズも同じままで、他の要素はパン/ズームします。