x and y of d3.event transform will be out of screen while using nested svgs

[cshimegi]

Hi,

Recently, I try to do something that can apply to multiple SVGs in a SVG parent with d3.v4.js..

1. 3D rotation
2. Movement

For imaging easily, the HTML elements look like

<svg id='parent'>
   <g transform="translate(26048.786909321167,-7776.133710715923) scale(0.8705505632961249)">
       <svg  id='child1'>
           <g>
              <forignObject>
                   <canvas></canvas>
              </forignObject>
           </g>
       </svg>
       <svg  id='child2'>
            <g>
              <forignObject>
                   <canvas></canvas>
              </forignObject>
            </g>
       </svg>
                      ...
   </g>
</svg>

However, I have some problems.

1. After moving parent SVG several times, it will go to somewhere out of screen and its transform looks like above.
   Does anyone know what happened and how to solve it ?
2. While moving parent SVG, its children(also, SVG) look like being shaken.
   I have no idea what this is. Does anyone know ?

My zoom setting is

d3.zoom().scaleExtent([0.01, 5])

My browser is Chrome Version 88.0.4324.190 (Official Build) (64-bit).

[cshimegi]

I got the answer.

[Fil]

please share it

[cshimegi]

I found the solution from this stackflow.
https://stackoverflow.com/questions/21163736/d3js-dragging-a-group-by-using-one-of-its-children?fbclid=IwAR2JHyt-K8R0bMSb6HRVBUTYK3AXL-Vq4gc2V_qE9q65kbW6kC2j10T75LA