diff --git a/packages/g6/__tests__/snapshots/layouts/compact-box/basic.svg b/packages/g6/__tests__/snapshots/layouts/compact-box/basic.svg
index 487ca46600d..b5708e0a86a 100644
--- a/packages/g6/__tests__/snapshots/layouts/compact-box/basic.svg
+++ b/packages/g6/__tests__/snapshots/layouts/compact-box/basic.svg
@@ -1,219 +1,219 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
   <defs/>
-  <g transform="matrix(0.478011,0,0,0.478011,147.915878,285.850861)">
+  <g transform="matrix(0.478011,0,0,0.478011,91.510513,130.497131)">
     <g fill="none">
       <g fill="none">
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -200,-36 C -100 -36,-100 -400,0 -400" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -81.99999237060547,289 C 18.000003814697266 289,18.000003814697266 -74.99999237060547,118 -74.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -200,-36 C -100 -36,-100 3,0 3" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -81.99999237060547,289 C 18.000003814697266 289,18.000003814697266 328,118 328" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -200,-36 C -100 -36,-100 328,0 328" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -81.99999237060547,289 C 18.000003814697266 289,18.000003814697266 653,118 653" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -582,232 -582" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,-74.99999237060547 C 250 -74.99999237060547,250 -257,350 -257" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -530,232 -530" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,-74.99999237060547 C 250 -74.99999237060547,250 -205,350 -205" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -478,232 -478" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,-74.99999237060547 C 250 -74.99999237060547,250 -153,350 -153" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -426,232 -426" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,-74.99999237060547 C 250 -74.99999237060547,250 -100.99999237060547,350 -100.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -374,232 -374" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,-74.99999237060547 C 250 -74.99999237060547,250 -48.99999237060547,350 -48.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -322,232 -322" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,-74.99999237060547 C 250 -74.99999237060547,250 3.0000076293945312,350 3.0000076293945312" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -270,232 -270" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,-74.99999237060547 C 250 -74.99999237060547,250 55.00000762939453,350 55.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -218,232 -218" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,-74.99999237060547 C 250 -74.99999237060547,250 107.00000762939453,350 107.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,3 C 132 3,132 -166,232 -166" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,328 C 250 328,250 159,350 159" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,3 C 132 3,132 42,232 42" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,328 C 250 328,250 367,350 367" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,3 C 132 3,132 172,232 172" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,328 C 250 328,250 497,350 497" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -296,464 -296" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,159 C 482 159,482 29.00000762939453,582 29.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -244,464 -244" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,159 C 482 159,482 81.00000762939453,582 81.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -192,464 -192" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,159 C 482 159,482 133,582 133" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -140,464 -140" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,159 C 482 159,482 185,582 185" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -88,464 -88" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,159 C 482 159,482 237,582 237" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -36,464 -36" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,159 C 482 159,482 289,582 289" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,42 C 364 42,364 16,464 16" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,367 C 482 367,482 341,582 341" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,42 C 364 42,364 68,464 68" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,367 C 482 367,482 393,582 393" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,172 C 364 172,364 120,464 120" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,497 C 482 497,482 445,582 445" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,172 C 364 172,364 172,464 172" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,497 C 482 497,482 497,582 497" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,172 C 364 172,364 224,464 224" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,497 C 482 497,482 549,582 549" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,328 C 132 328,132 224,232 224" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,653 C 250 653,250 549,350 549" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,328 C 132 328,132 276,232 276" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,653 C 250 653,250 601,350 601" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,328 C 132 328,132 328,232 328" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,653 C 250 653,250 653,350 653" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,328 C 132 328,132 380,232 380" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,653 C 250 653,250 705,350 705" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,328 C 132 328,132 432,232 432" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,653 C 250 653,250 757,350 757" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
-        <g fill="none" x="-216" y="-36" transform="matrix(1,0,0,1,-216,-36)">
+        <g fill="none" x="-97.99999237060547" y="289.00000762939453" transform="matrix(1,0,0,1,-97.999992,289)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -225,7 +225,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="16" y="-400" transform="matrix(1,0,0,1,16,-400)">
+        <g fill="none" x="134.00000762939453" y="-74.99999237060547" transform="matrix(1,0,0,1,134,-74.999992)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -237,7 +237,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-582" transform="matrix(1,0,0,1,248,-582)">
+        <g fill="none" x="366.00000762939453" y="-256.99999237060547" transform="matrix(1,0,0,1,366,-257)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -249,7 +249,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-530" transform="matrix(1,0,0,1,248,-530)">
+        <g fill="none" x="366.00000762939453" y="-204.99999237060547" transform="matrix(1,0,0,1,366,-205)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -261,7 +261,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-478" transform="matrix(1,0,0,1,248,-478)">
+        <g fill="none" x="366.00000762939453" y="-152.99999237060547" transform="matrix(1,0,0,1,366,-153)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -273,7 +273,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-426" transform="matrix(1,0,0,1,248,-426)">
+        <g fill="none" x="366.00000762939453" y="-100.99999237060547" transform="matrix(1,0,0,1,366,-100.999992)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -285,7 +285,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-374" transform="matrix(1,0,0,1,248,-374)">
+        <g fill="none" x="366.00000762939453" y="-48.99999237060547" transform="matrix(1,0,0,1,366,-48.999992)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -297,7 +297,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-322" transform="matrix(1,0,0,1,248,-322)">
+        <g fill="none" x="366.00000762939453" y="3.0000076293945312" transform="matrix(1,0,0,1,366,3.000008)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -309,7 +309,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-270" transform="matrix(1,0,0,1,248,-270)">
+        <g fill="none" x="366.00000762939453" y="55.00000762939453" transform="matrix(1,0,0,1,366,55.000008)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -321,7 +321,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-218" transform="matrix(1,0,0,1,248,-218)">
+        <g fill="none" x="366.00000762939453" y="107.00000762939453" transform="matrix(1,0,0,1,366,107.000008)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -333,7 +333,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="16" y="3" transform="matrix(1,0,0,1,16,3)">
+        <g fill="none" x="134.00000762939453" y="328.00000762939453" transform="matrix(1,0,0,1,134,328)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -345,7 +345,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-166" transform="matrix(1,0,0,1,248,-166)">
+        <g fill="none" x="366.00000762939453" y="159.00000762939453" transform="matrix(1,0,0,1,366,159)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -357,7 +357,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-296" transform="matrix(1,0,0,1,480,-296)">
+        <g fill="none" x="598.0000076293945" y="29.00000762939453" transform="matrix(1,0,0,1,598,29.000008)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -369,7 +369,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-244" transform="matrix(1,0,0,1,480,-244)">
+        <g fill="none" x="598.0000076293945" y="81.00000762939453" transform="matrix(1,0,0,1,598,81.000008)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -381,7 +381,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-192" transform="matrix(1,0,0,1,480,-192)">
+        <g fill="none" x="598.0000076293945" y="133.00000762939453" transform="matrix(1,0,0,1,598,133)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -393,7 +393,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-140" transform="matrix(1,0,0,1,480,-140)">
+        <g fill="none" x="598.0000076293945" y="185.00000762939453" transform="matrix(1,0,0,1,598,185)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -405,7 +405,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-88" transform="matrix(1,0,0,1,480,-88)">
+        <g fill="none" x="598.0000076293945" y="237.00000762939453" transform="matrix(1,0,0,1,598,237)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -417,7 +417,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-36" transform="matrix(1,0,0,1,480,-36)">
+        <g fill="none" x="598.0000076293945" y="289.00000762939453" transform="matrix(1,0,0,1,598,289)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -429,7 +429,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="42" transform="matrix(1,0,0,1,248,42)">
+        <g fill="none" x="366.00000762939453" y="367.00000762939453" transform="matrix(1,0,0,1,366,367)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -441,7 +441,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="16" transform="matrix(1,0,0,1,480,16)">
+        <g fill="none" x="598.0000076293945" y="341.00000762939453" transform="matrix(1,0,0,1,598,341)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -453,7 +453,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="68" transform="matrix(1,0,0,1,480,68)">
+        <g fill="none" x="598.0000076293945" y="393.00000762939453" transform="matrix(1,0,0,1,598,393)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -465,7 +465,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="172" transform="matrix(1,0,0,1,248,172)">
+        <g fill="none" x="366.00000762939453" y="497.00000762939453" transform="matrix(1,0,0,1,366,497)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -477,7 +477,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="120" transform="matrix(1,0,0,1,480,120)">
+        <g fill="none" x="598.0000076293945" y="445.00000762939453" transform="matrix(1,0,0,1,598,445)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -489,7 +489,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="172" transform="matrix(1,0,0,1,480,172)">
+        <g fill="none" x="598.0000076293945" y="497.00000762939453" transform="matrix(1,0,0,1,598,497)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -501,7 +501,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="224" transform="matrix(1,0,0,1,480,224)">
+        <g fill="none" x="598.0000076293945" y="549.0000076293945" transform="matrix(1,0,0,1,598,549)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -513,7 +513,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="16" y="328" transform="matrix(1,0,0,1,16,328)">
+        <g fill="none" x="134.00000762939453" y="653.0000076293945" transform="matrix(1,0,0,1,134,653)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -525,7 +525,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="224" transform="matrix(1,0,0,1,248,224)">
+        <g fill="none" x="366.00000762939453" y="549.0000076293945" transform="matrix(1,0,0,1,366,549)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -537,7 +537,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="276" transform="matrix(1,0,0,1,248,276)">
+        <g fill="none" x="366.00000762939453" y="601.0000076293945" transform="matrix(1,0,0,1,366,601)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -549,7 +549,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="328" transform="matrix(1,0,0,1,248,328)">
+        <g fill="none" x="366.00000762939453" y="653.0000076293945" transform="matrix(1,0,0,1,366,653)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -561,7 +561,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="380" transform="matrix(1,0,0,1,248,380)">
+        <g fill="none" x="366.00000762939453" y="705.0000076293945" transform="matrix(1,0,0,1,366,705)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -573,7 +573,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="432" transform="matrix(1,0,0,1,248,432)">
+        <g fill="none" x="366.00000762939453" y="757.0000076293945" transform="matrix(1,0,0,1,366,757)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
diff --git a/packages/g6/__tests__/snapshots/layouts/compact-box/left-align.svg b/packages/g6/__tests__/snapshots/layouts/compact-box/left-align.svg
index c82ca43dd60..30b909e745c 100644
--- a/packages/g6/__tests__/snapshots/layouts/compact-box/left-align.svg
+++ b/packages/g6/__tests__/snapshots/layouts/compact-box/left-align.svg
@@ -1,219 +1,219 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
   <defs/>
-  <g transform="matrix(0.447027,0,0,0.447027,290.344208,170.625839)">
+  <g transform="matrix(0.447027,0,0,0.447027,138.354950,101.783638)">
     <g fill="none">
       <g fill="none">
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -48,-155 C -48 -80,-440 -80,-440 -5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 292,-0.9999923706054688 C 292 74.00000381469727,-99.99999237060547 74.00000381469727,-99.99999237060547 149" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -48,-155 C -48 -80,-6 -80,-6 -5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 292,-0.9999923706054688 C 292 74.00000381469727,334 74.00000381469727,334 149" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -48,-155 C -48 -80,344 -80,344 -5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 292,-0.9999923706054688 C 292 74.00000381469727,684 74.00000381469727,684 149" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -440,21 C -440 96,-636 96,-636 171" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -99.99999237060547,175 C -99.99999237060547 250,-296 250,-296 325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -440,21 C -440 96,-580 96,-580 171" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -99.99999237060547,175 C -99.99999237060547 250,-240 250,-240 325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -440,21 C -440 96,-524 96,-524 171" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -99.99999237060547,175 C -99.99999237060547 250,-184 250,-184 325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -440,21 C -440 96,-468 96,-468 171" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -99.99999237060547,175 C -99.99999237060547 250,-127.99999237060547 250,-127.99999237060547 325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -440,21 C -440 96,-412 96,-412 171" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -99.99999237060547,175 C -99.99999237060547 250,-71.99999237060547 250,-71.99999237060547 325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -440,21 C -440 96,-356 96,-356 171" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -99.99999237060547,175 C -99.99999237060547 250,-15.999992370605469 250,-15.999992370605469 325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -440,21 C -440 96,-300 96,-300 171" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -99.99999237060547,175 C -99.99999237060547 250,40.00000762939453 250,40.00000762939453 325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -440,21 C -440 96,-244 96,-244 171" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -99.99999237060547,175 C -99.99999237060547 250,96.00000762939453 250,96.00000762939453 325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -6,21 C -6 96,-188 96,-188 171" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 334,175 C 334 250,152 250,152 325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -6,21 C -6 96,36 96,36 171" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 334,175 C 334 250,376 250,376 325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -6,21 C -6 96,176 96,176 171" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 334,175 C 334 250,516 250,516 325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -188,197 C -188 272,-328 272,-328 347" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 152,351 C 152 426,12.000007629394531 426,12.000007629394531 501" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -188,197 C -188 272,-272 272,-272 347" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 152,351 C 152 426,68.00000762939453 426,68.00000762939453 501" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -188,197 C -188 272,-216 272,-216 347" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 152,351 C 152 426,124.00000762939453 426,124.00000762939453 501" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -188,197 C -188 272,-160 272,-160 347" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 152,351 C 152 426,180 426,180 501" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -188,197 C -188 272,-104 272,-104 347" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 152,351 C 152 426,236 426,236 501" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -188,197 C -188 272,-48 272,-48 347" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 152,351 C 152 426,292 426,292 501" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 36,197 C 36 272,8 272,8 347" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 376,351 C 376 426,348 426,348 501" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 36,197 C 36 272,64 272,64 347" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 376,351 C 376 426,404 426,404 501" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 176,197 C 176 272,120 272,120 347" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 516,351 C 516 426,460 426,460 501" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 176,197 C 176 272,176 272,176 347" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 516,351 C 516 426,516 426,516 501" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 176,197 C 176 272,232 272,232 347" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 516,351 C 516 426,572 426,572 501" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 344,21 C 344 96,232 96,232 171" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 684,175 C 684 250,572 250,572 325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 344,21 C 344 96,288 96,288 171" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 684,175 C 684 250,628 250,628 325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 344,21 C 344 96,344 96,344 171" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 684,175 C 684 250,684 250,684 325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 344,21 C 344 96,400 96,400 171" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 684,175 C 684 250,740 250,740 325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 344,21 C 344 96,456 96,456 171" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 684,175 C 684 250,796 250,796 325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,13 C 0 13,0 13,0 13" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
-        <g fill="none" x="-48" y="-168" transform="matrix(0,1,-1,0,-48,-168)">
+        <g fill="none" x="292.00000762939453" y="-13.999992370605469" transform="matrix(0,1,-1,0,292,-13.999992)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -225,7 +225,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-440" y="8" transform="matrix(0,1,-1,0,-440,8)">
+        <g fill="none" x="-99.99999237060547" y="162.00000762939453" transform="matrix(0,1,-1,0,-99.999992,162)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -237,7 +237,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-636" y="184" transform="matrix(0,1,-1,0,-636,184)">
+        <g fill="none" x="-295.99999237060547" y="338.00000762939453" transform="matrix(0,1,-1,0,-296,338)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -249,7 +249,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-580" y="184" transform="matrix(0,1,-1,0,-580,184)">
+        <g fill="none" x="-239.99999237060547" y="338.00000762939453" transform="matrix(0,1,-1,0,-240,338)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -261,7 +261,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-524" y="184" transform="matrix(0,1,-1,0,-524,184)">
+        <g fill="none" x="-183.99999237060547" y="338.00000762939453" transform="matrix(0,1,-1,0,-184,338)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -273,7 +273,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-468" y="184" transform="matrix(0,1,-1,0,-468,184)">
+        <g fill="none" x="-127.99999237060547" y="338.00000762939453" transform="matrix(0,1,-1,0,-127.999992,338)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -285,7 +285,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-412" y="184" transform="matrix(0,1,-1,0,-412,184)">
+        <g fill="none" x="-71.99999237060547" y="338.00000762939453" transform="matrix(0,1,-1,0,-71.999992,338)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -297,7 +297,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-356" y="184" transform="matrix(0,1,-1,0,-356,184)">
+        <g fill="none" x="-15.999992370605469" y="338.00000762939453" transform="matrix(0,1,-1,0,-15.999992,338)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -309,7 +309,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-300" y="184" transform="matrix(0,1,-1,0,-300,184)">
+        <g fill="none" x="40.00000762939453" y="338.00000762939453" transform="matrix(0,1,-1,0,40.000008,338)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -321,7 +321,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-244" y="184" transform="matrix(0,1,-1,0,-244,184)">
+        <g fill="none" x="96.00000762939453" y="338.00000762939453" transform="matrix(0,1,-1,0,96.000008,338)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -333,7 +333,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-6" y="8" transform="matrix(0,1,-1,0,-6,8)">
+        <g fill="none" x="334.00000762939453" y="162.00000762939453" transform="matrix(0,1,-1,0,334,162)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -345,7 +345,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-188" y="184" transform="matrix(0,1,-1,0,-188,184)">
+        <g fill="none" x="152.00000762939453" y="338.00000762939453" transform="matrix(0,1,-1,0,152,338)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -357,7 +357,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-328" y="360" transform="matrix(0,1,-1,0,-328,360)">
+        <g fill="none" x="12.000007629394531" y="514.0000076293945" transform="matrix(0,1,-1,0,12.000008,514)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -369,7 +369,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-272" y="360" transform="matrix(0,1,-1,0,-272,360)">
+        <g fill="none" x="68.00000762939453" y="514.0000076293945" transform="matrix(0,1,-1,0,68.000008,514)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -381,7 +381,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-216" y="360" transform="matrix(0,1,-1,0,-216,360)">
+        <g fill="none" x="124.00000762939453" y="514.0000076293945" transform="matrix(0,1,-1,0,124.000008,514)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -393,7 +393,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-160" y="360" transform="matrix(0,1,-1,0,-160,360)">
+        <g fill="none" x="180.00000762939453" y="514.0000076293945" transform="matrix(0,1,-1,0,180,514)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -405,7 +405,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-104" y="360" transform="matrix(0,1,-1,0,-104,360)">
+        <g fill="none" x="236.00000762939453" y="514.0000076293945" transform="matrix(0,1,-1,0,236,514)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -417,7 +417,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-48" y="360" transform="matrix(0,1,-1,0,-48,360)">
+        <g fill="none" x="292.00000762939453" y="514.0000076293945" transform="matrix(0,1,-1,0,292,514)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -429,7 +429,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="36" y="184" transform="matrix(0,1,-1,0,36,184)">
+        <g fill="none" x="376.00000762939453" y="338.00000762939453" transform="matrix(0,1,-1,0,376,338)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -441,7 +441,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="8" y="360" transform="matrix(0,1,-1,0,8,360)">
+        <g fill="none" x="348.00000762939453" y="514.0000076293945" transform="matrix(0,1,-1,0,348,514)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -453,7 +453,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="64" y="360" transform="matrix(0,1,-1,0,64,360)">
+        <g fill="none" x="404.00000762939453" y="514.0000076293945" transform="matrix(0,1,-1,0,404,514)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -465,7 +465,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="176" y="184" transform="matrix(0,1,-1,0,176,184)">
+        <g fill="none" x="516.0000076293945" y="338.00000762939453" transform="matrix(0,1,-1,0,516,338)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -477,7 +477,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="120" y="360" transform="matrix(0,1,-1,0,120,360)">
+        <g fill="none" x="460.00000762939453" y="514.0000076293945" transform="matrix(0,1,-1,0,460,514)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -489,7 +489,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="176" y="360" transform="matrix(0,1,-1,0,176,360)">
+        <g fill="none" x="516.0000076293945" y="514.0000076293945" transform="matrix(0,1,-1,0,516,514)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -501,7 +501,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="232" y="360" transform="matrix(0,1,-1,0,232,360)">
+        <g fill="none" x="572.0000076293945" y="514.0000076293945" transform="matrix(0,1,-1,0,572,514)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -513,7 +513,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="344" y="8" transform="matrix(0,1,-1,0,344,8)">
+        <g fill="none" x="684.0000076293945" y="162.00000762939453" transform="matrix(0,1,-1,0,684,162)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -525,7 +525,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="232" y="184" transform="matrix(0,1,-1,0,232,184)">
+        <g fill="none" x="572.0000076293945" y="338.00000762939453" transform="matrix(0,1,-1,0,572,338)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -537,7 +537,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="288" y="184" transform="matrix(0,1,-1,0,288,184)">
+        <g fill="none" x="628.0000076293945" y="338.00000762939453" transform="matrix(0,1,-1,0,628,338)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -549,7 +549,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="344" y="184" transform="matrix(0,1,-1,0,344,184)">
+        <g fill="none" x="684.0000076293945" y="338.00000762939453" transform="matrix(0,1,-1,0,684,338)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -561,7 +561,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="400" y="184" transform="matrix(0,1,-1,0,400,184)">
+        <g fill="none" x="740.0000076293945" y="338.00000762939453" transform="matrix(0,1,-1,0,740,338)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -573,7 +573,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="456" y="184" transform="matrix(0,1,-1,0,456,184)">
+        <g fill="none" x="796.0000076293945" y="338.00000762939453" transform="matrix(0,1,-1,0,796,338)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
diff --git a/packages/g6/__tests__/snapshots/layouts/compact-box/top-to-bottom.svg b/packages/g6/__tests__/snapshots/layouts/compact-box/top-to-bottom.svg
index 77fbb6f7ae9..01591b5287b 100644
--- a/packages/g6/__tests__/snapshots/layouts/compact-box/top-to-bottom.svg
+++ b/packages/g6/__tests__/snapshots/layouts/compact-box/top-to-bottom.svg
@@ -1,219 +1,219 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
   <defs/>
-  <g transform="matrix(0.570698,0,0,0.570698,127.836365,280.247009)">
+  <g transform="matrix(0.570698,0,0,0.570698,60.779346,106.184090)">
     <g fill="none">
       <g fill="none">
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -212,-28 C -100 -28,-100 -343,12 -343" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -94.49999237060547,277 C 17.500003814697266 277,17.500003814697266 -37.99999237060547,129.5 -37.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -212,-28 C -100 -28,-100 26,12 26" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -94.49999237060547,277 C 17.500003814697266 277,17.500003814697266 331,129.5 331" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -212,-28 C -100 -28,-100 287,12 287" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -94.49999237060547,277 C 17.500003814697266 277,17.500003814697266 592,129.5 592" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 24,-343 C 135 -343,135 -469,246 -469" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.5,-37.99999237060547 C 252.5 -37.99999237060547,252.5 -164,363.5 -164" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 24,-343 C 135 -343,135 -433,246 -433" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.5,-37.99999237060547 C 252.5 -37.99999237060547,252.5 -127.99999237060547,363.5 -127.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 24,-343 C 135 -343,135 -397,246 -397" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.5,-37.99999237060547 C 252.5 -37.99999237060547,252.5 -91.99999237060547,363.5 -91.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 24,-343 C 135 -343,135 -361,246 -361" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.5,-37.99999237060547 C 252.5 -37.99999237060547,252.5 -55.99999237060547,363.5 -55.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 24,-343 C 135 -343,135 -325,246 -325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.5,-37.99999237060547 C 252.5 -37.99999237060547,252.5 -19.99999237060547,363.5 -19.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 24,-343 C 135 -343,135 -289,246 -289" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.5,-37.99999237060547 C 252.5 -37.99999237060547,252.5 16.00000762939453,363.5 16.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 24,-343 C 135 -343,135 -253,246 -253" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.5,-37.99999237060547 C 252.5 -37.99999237060547,252.5 52.00000762939453,363.5 52.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 24,-343 C 135 -343,135 -217,246 -217" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.5,-37.99999237060547 C 252.5 -37.99999237060547,252.5 88.00000762939453,363.5 88.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 24,26 C 132.5 26,132.5 -91,241 -91" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.5,331 C 250 331,250 214,358.5 214" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 24,26 C 132.5 26,132.5 53,241 53" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.5,331 C 250 331,250 358,358.5 358" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 24,26 C 132.5 26,132.5 143,241 143" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.5,331 C 250 331,250 448,358.5 448" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 253,-91 C 365 -91,365 -181,477 -181" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 370.5,214 C 482.5 214,482.5 124.00000762939453,594.5 124.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 253,-91 C 365 -91,365 -145,477 -145" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 370.5,214 C 482.5 214,482.5 160,594.5 160" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 253,-91 C 365 -91,365 -109,477 -109" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 370.5,214 C 482.5 214,482.5 196,594.5 196" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 253,-91 C 365 -91,365 -73,477 -73" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 370.5,214 C 482.5 214,482.5 232,594.5 232" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 253,-91 C 365 -91,365 -37,477 -37" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 370.5,214 C 482.5 214,482.5 268,594.5 268" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 253,-91 C 365 -91,365 -1,477 -1" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 370.5,214 C 482.5 214,482.5 304,594.5 304" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 253,53 C 360.5 53,360.5 35,468 35" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 370.5,358 C 478 358,478 340,585.5 340" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 253,53 C 360.5 53,360.5 71,468 71" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 370.5,358 C 478 358,478 376,585.5 376" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 253,143 C 360 143,360 107,467 107" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 370.5,448 C 477.5 448,477.5 412,584.5 412" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 253,143 C 360 143,360 143,467 143" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 370.5,448 C 477.5 448,477.5 448,584.5 448" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 253,143 C 360 143,360 179,467 179" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 370.5,448 C 477.5 448,477.5 484,584.5 484" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 24,287 C 133 287,133 215,242 215" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.5,592 C 250.5 592,250.5 520,359.5 520" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 24,287 C 133 287,133 251,242 251" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.5,592 C 250.5 592,250.5 556,359.5 556" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 24,287 C 133 287,133 287,242 287" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.5,592 C 250.5 592,250.5 592,359.5 592" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 24,287 C 133 287,133 323,242 323" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.5,592 C 250.5 592,250.5 628,359.5 628" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 24,287 C 133 287,133 359,242 359" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.5,592 C 250.5 592,250.5 664,359.5 664" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 6,0 C 6 0,6 0,6 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
-        <g fill="none" x="-218" y="-28" transform="matrix(1,0,0,1,-218,-28)">
+        <g fill="none" x="-100.49999237060547" y="277.00000762939453" transform="matrix(1,0,0,1,-100.499992,277)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -225,7 +225,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="18" y="-343" transform="matrix(1,0,0,1,18,-343)">
+        <g fill="none" x="135.50000762939453" y="-37.99999237060547" transform="matrix(1,0,0,1,135.500000,-37.999992)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -237,7 +237,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="252" y="-469" transform="matrix(1,0,0,1,252,-469)">
+        <g fill="none" x="369.50000762939453" y="-163.99999237060547" transform="matrix(1,0,0,1,369.500000,-164)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -249,7 +249,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="252" y="-433" transform="matrix(1,0,0,1,252,-433)">
+        <g fill="none" x="369.50000762939453" y="-127.99999237060547" transform="matrix(1,0,0,1,369.500000,-127.999992)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -261,7 +261,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="252" y="-397" transform="matrix(1,0,0,1,252,-397)">
+        <g fill="none" x="369.50000762939453" y="-91.99999237060547" transform="matrix(1,0,0,1,369.500000,-91.999992)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -273,7 +273,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="252" y="-361" transform="matrix(1,0,0,1,252,-361)">
+        <g fill="none" x="369.50000762939453" y="-55.99999237060547" transform="matrix(1,0,0,1,369.500000,-55.999992)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -285,7 +285,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="252" y="-325" transform="matrix(1,0,0,1,252,-325)">
+        <g fill="none" x="369.50000762939453" y="-19.99999237060547" transform="matrix(1,0,0,1,369.500000,-19.999992)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -297,7 +297,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="252" y="-289" transform="matrix(1,0,0,1,252,-289)">
+        <g fill="none" x="369.50000762939453" y="16.00000762939453" transform="matrix(1,0,0,1,369.500000,16.000008)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -309,7 +309,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="252" y="-253" transform="matrix(1,0,0,1,252,-253)">
+        <g fill="none" x="369.50000762939453" y="52.00000762939453" transform="matrix(1,0,0,1,369.500000,52.000008)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -321,7 +321,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="252" y="-217" transform="matrix(1,0,0,1,252,-217)">
+        <g fill="none" x="369.50000762939453" y="88.00000762939453" transform="matrix(1,0,0,1,369.500000,88.000008)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -333,7 +333,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="18" y="26" transform="matrix(1,0,0,1,18,26)">
+        <g fill="none" x="135.50000762939453" y="331.00000762939453" transform="matrix(1,0,0,1,135.500000,331)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -345,7 +345,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="247" y="-91" transform="matrix(1,0,0,1,247,-91)">
+        <g fill="none" x="364.50000762939453" y="214.00000762939453" transform="matrix(1,0,0,1,364.500000,214)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -357,7 +357,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="483" y="-181" transform="matrix(1,0,0,1,483,-181)">
+        <g fill="none" x="600.5000076293945" y="124.00000762939453" transform="matrix(1,0,0,1,600.500000,124.000008)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -369,7 +369,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="483" y="-145" transform="matrix(1,0,0,1,483,-145)">
+        <g fill="none" x="600.5000076293945" y="160.00000762939453" transform="matrix(1,0,0,1,600.500000,160)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -381,7 +381,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="483" y="-109" transform="matrix(1,0,0,1,483,-109)">
+        <g fill="none" x="600.5000076293945" y="196.00000762939453" transform="matrix(1,0,0,1,600.500000,196)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -393,7 +393,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="483" y="-73" transform="matrix(1,0,0,1,483,-73)">
+        <g fill="none" x="600.5000076293945" y="232.00000762939453" transform="matrix(1,0,0,1,600.500000,232)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -405,7 +405,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="483" y="-37" transform="matrix(1,0,0,1,483,-37)">
+        <g fill="none" x="600.5000076293945" y="268.00000762939453" transform="matrix(1,0,0,1,600.500000,268)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -417,7 +417,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="483" y="-1" transform="matrix(1,0,0,1,483,-1)">
+        <g fill="none" x="600.5000076293945" y="304.00000762939453" transform="matrix(1,0,0,1,600.500000,304)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -429,7 +429,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="247" y="53" transform="matrix(1,0,0,1,247,53)">
+        <g fill="none" x="364.50000762939453" y="358.00000762939453" transform="matrix(1,0,0,1,364.500000,358)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -441,7 +441,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="474" y="35" transform="matrix(1,0,0,1,474,35)">
+        <g fill="none" x="591.5000076293945" y="340.00000762939453" transform="matrix(1,0,0,1,591.500000,340)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -453,7 +453,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="474" y="71" transform="matrix(1,0,0,1,474,71)">
+        <g fill="none" x="591.5000076293945" y="376.00000762939453" transform="matrix(1,0,0,1,591.500000,376)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -465,7 +465,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="247" y="143" transform="matrix(1,0,0,1,247,143)">
+        <g fill="none" x="364.50000762939453" y="448.00000762939453" transform="matrix(1,0,0,1,364.500000,448)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -477,7 +477,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="473" y="107" transform="matrix(1,0,0,1,473,107)">
+        <g fill="none" x="590.5000076293945" y="412.00000762939453" transform="matrix(1,0,0,1,590.500000,412)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -489,7 +489,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="473" y="143" transform="matrix(1,0,0,1,473,143)">
+        <g fill="none" x="590.5000076293945" y="448.00000762939453" transform="matrix(1,0,0,1,590.500000,448)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -501,7 +501,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="473" y="179" transform="matrix(1,0,0,1,473,179)">
+        <g fill="none" x="590.5000076293945" y="484.00000762939453" transform="matrix(1,0,0,1,590.500000,484)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -513,7 +513,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="18" y="287" transform="matrix(1,0,0,1,18,287)">
+        <g fill="none" x="135.50000762939453" y="592.0000076293945" transform="matrix(1,0,0,1,135.500000,592)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -525,7 +525,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="215" transform="matrix(1,0,0,1,248,215)">
+        <g fill="none" x="365.50000762939453" y="520.0000076293945" transform="matrix(1,0,0,1,365.500000,520)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -537,7 +537,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="251" transform="matrix(1,0,0,1,248,251)">
+        <g fill="none" x="365.50000762939453" y="556.0000076293945" transform="matrix(1,0,0,1,365.500000,556)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -549,7 +549,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="287" transform="matrix(1,0,0,1,248,287)">
+        <g fill="none" x="365.50000762939453" y="592.0000076293945" transform="matrix(1,0,0,1,365.500000,592)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -561,7 +561,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="323" transform="matrix(1,0,0,1,248,323)">
+        <g fill="none" x="365.50000762939453" y="628.0000076293945" transform="matrix(1,0,0,1,365.500000,628)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
@@ -573,7 +573,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="359" transform="matrix(1,0,0,1,248,359)">
+        <g fill="none" x="365.50000762939453" y="664.0000076293945" transform="matrix(1,0,0,1,365.500000,664)">
           <g>
             <circle fill="rgba(255,255,255,1)" class="key" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
           </g>
diff --git a/packages/g6/__tests__/snapshots/layouts/dendrogram/basic.svg b/packages/g6/__tests__/snapshots/layouts/dendrogram/basic.svg
index 7edea6d38c8..c4179c772ee 100644
--- a/packages/g6/__tests__/snapshots/layouts/dendrogram/basic.svg
+++ b/packages/g6/__tests__/snapshots/layouts/dendrogram/basic.svg
@@ -1,219 +1,219 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
   <defs/>
-  <g transform="matrix(0.446397,0,0,0.446397,63.120487,286.158142)">
+  <g transform="matrix(0.446397,0,0,0.446397,110.884933,138.400818)">
     <g fill="none">
       <g fill="none">
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -2,-54 C 232 -54,232 -389,466 -389" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -108.99999237060547,277 C 125.00000381469727 277,125.00000381469727 -57.99999237060547,359 -57.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -2,-54 C 107 -54,107 0,216 0" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -108.99999237060547,277 C 0.00000762939453125 277,0.00000762939453125 331,109.00000762939453 331" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -2,-54 C 232 -54,232 281,466 281" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -108.99999237060547,277 C 125.00000381469727 277,125.00000381469727 612,359 612" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,-389 C 607 -389,607 -515,716 -515" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,-57.99999237060547 C 500 -57.99999237060547,500 -184,609 -184" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,-389 C 607 -389,607 -479,716 -479" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,-57.99999237060547 C 500 -57.99999237060547,500 -148,609 -148" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,-389 C 607 -389,607 -443,716 -443" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,-57.99999237060547 C 500 -57.99999237060547,500 -111.99999237060547,609 -111.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,-389 C 607 -389,607 -407,716 -407" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,-57.99999237060547 C 500 -57.99999237060547,500 -75.99999237060547,609 -75.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,-389 C 607 -389,607 -371,716 -371" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,-57.99999237060547 C 500 -57.99999237060547,500 -39.99999237060547,609 -39.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,-389 C 607 -389,607 -335,716 -335" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,-57.99999237060547 C 500 -57.99999237060547,500 -3.9999923706054688,609 -3.9999923706054688" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,-389 C 607 -389,607 -299,716 -299" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,-57.99999237060547 C 500 -57.99999237060547,500 32.00000762939453,609 32.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,-389 C 607 -389,607 -263,716 -263" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,-57.99999237060547 C 500 -57.99999237060547,500 68.00000762939453,609 68.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 248,0 C 357 0,357 -127,466 -127" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.00000762939453,331 C 250.00000381469727 331,250.00000381469727 204,359 204" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 248,0 C 357 0,357 27,466 27" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.00000762939453,331 C 250.00000381469727 331,250.00000381469727 358,359 358" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 248,0 C 357 0,357 127,466 127" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 141.00000762939453,331 C 250.00000381469727 331,250.00000381469727 458,359 458" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,-127 C 607 -127,607 -217,716 -217" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,204 C 500 204,500 114.00000762939453,609 114.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,-127 C 607 -127,607 -181,716 -181" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,204 C 500 204,500 150,609 150" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,-127 C 607 -127,607 -145,716 -145" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,204 C 500 204,500 186,609 186" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,-127 C 607 -127,607 -109,716 -109" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,204 C 500 204,500 222,609 222" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,-127 C 607 -127,607 -73,716 -73" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,204 C 500 204,500 258,609 258" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,-127 C 607 -127,607 -37,716 -37" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,204 C 500 204,500 294,609 294" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,27 C 607 27,607 9,716 9" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,358 C 500 358,500 340,609 340" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,27 C 607 27,607 45,716 45" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,358 C 500 358,500 376,609 376" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,127 C 607 127,607 91,716 91" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,458 C 500 458,500 422,609 422" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,127 C 607 127,607 127,716 127" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,458 C 500 458,500 458,609 458" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,127 C 607 127,607 163,716 163" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,458 C 500 458,500 494,609 494" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,281 C 607 281,607 209,716 209" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,612 C 500 612,500 540,609 540" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,281 C 607 281,607 245,716 245" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,612 C 500 612,500 576,609 576" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,281 C 607 281,607 281,716 281" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,612 C 500 612,500 612,609 612" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,281 C 607 281,607 317,716 317" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,612 C 500 612,500 648,609 648" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 498,281 C 607 281,607 353,716 353" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 391,612 C 500 612,500 684,609 684" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
-        <g fill="none" x="-18" y="-54" transform="matrix(1,0,0,1,-18,-54)">
+        <g fill="none" x="-124.99999237060547" y="277.00000762939453" transform="matrix(1,0,0,1,-124.999992,277)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -225,7 +225,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="482" y="-389" transform="matrix(1,0,0,1,482,-389)">
+        <g fill="none" x="375.00000762939453" y="-57.99999237060547" transform="matrix(1,0,0,1,375,-57.999992)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -237,7 +237,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="-515" transform="matrix(1,0,0,1,732,-515)">
+        <g fill="none" x="625.0000076293945" y="-183.99999237060547" transform="matrix(1,0,0,1,625,-184)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -249,7 +249,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="-479" transform="matrix(1,0,0,1,732,-479)">
+        <g fill="none" x="625.0000076293945" y="-147.99999237060547" transform="matrix(1,0,0,1,625,-148)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -261,7 +261,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="-443" transform="matrix(1,0,0,1,732,-443)">
+        <g fill="none" x="625.0000076293945" y="-111.99999237060547" transform="matrix(1,0,0,1,625,-111.999992)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -273,7 +273,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="-407" transform="matrix(1,0,0,1,732,-407)">
+        <g fill="none" x="625.0000076293945" y="-75.99999237060547" transform="matrix(1,0,0,1,625,-75.999992)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -285,7 +285,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="-371" transform="matrix(1,0,0,1,732,-371)">
+        <g fill="none" x="625.0000076293945" y="-39.99999237060547" transform="matrix(1,0,0,1,625,-39.999992)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -297,7 +297,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="-335" transform="matrix(1,0,0,1,732,-335)">
+        <g fill="none" x="625.0000076293945" y="-3.9999923706054688" transform="matrix(1,0,0,1,625,-3.999992)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -309,7 +309,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="-299" transform="matrix(1,0,0,1,732,-299)">
+        <g fill="none" x="625.0000076293945" y="32.00000762939453" transform="matrix(1,0,0,1,625,32.000008)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -321,7 +321,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="-263" transform="matrix(1,0,0,1,732,-263)">
+        <g fill="none" x="625.0000076293945" y="68.00000762939453" transform="matrix(1,0,0,1,625,68.000008)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -333,7 +333,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="232" y="0" transform="matrix(1,0,0,1,232,0)">
+        <g fill="none" x="125.00000762939453" y="331.00000762939453" transform="matrix(1,0,0,1,125.000008,331)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -345,7 +345,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="482" y="-127" transform="matrix(1,0,0,1,482,-127)">
+        <g fill="none" x="375.00000762939453" y="204.00000762939453" transform="matrix(1,0,0,1,375,204)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -357,7 +357,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="-217" transform="matrix(1,0,0,1,732,-217)">
+        <g fill="none" x="625.0000076293945" y="114.00000762939453" transform="matrix(1,0,0,1,625,114.000008)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -369,7 +369,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="-181" transform="matrix(1,0,0,1,732,-181)">
+        <g fill="none" x="625.0000076293945" y="150.00000762939453" transform="matrix(1,0,0,1,625,150)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -381,7 +381,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="-145" transform="matrix(1,0,0,1,732,-145)">
+        <g fill="none" x="625.0000076293945" y="186.00000762939453" transform="matrix(1,0,0,1,625,186)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -393,7 +393,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="-109" transform="matrix(1,0,0,1,732,-109)">
+        <g fill="none" x="625.0000076293945" y="222.00000762939453" transform="matrix(1,0,0,1,625,222)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -405,7 +405,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="-73" transform="matrix(1,0,0,1,732,-73)">
+        <g fill="none" x="625.0000076293945" y="258.00000762939453" transform="matrix(1,0,0,1,625,258)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -417,7 +417,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="-37" transform="matrix(1,0,0,1,732,-37)">
+        <g fill="none" x="625.0000076293945" y="294.00000762939453" transform="matrix(1,0,0,1,625,294)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -429,7 +429,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="482" y="27" transform="matrix(1,0,0,1,482,27)">
+        <g fill="none" x="375.00000762939453" y="358.00000762939453" transform="matrix(1,0,0,1,375,358)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -441,7 +441,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="9" transform="matrix(1,0,0,1,732,9)">
+        <g fill="none" x="625.0000076293945" y="340.00000762939453" transform="matrix(1,0,0,1,625,340)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -453,7 +453,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="45" transform="matrix(1,0,0,1,732,45)">
+        <g fill="none" x="625.0000076293945" y="376.00000762939453" transform="matrix(1,0,0,1,625,376)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -465,7 +465,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="482" y="127" transform="matrix(1,0,0,1,482,127)">
+        <g fill="none" x="375.00000762939453" y="458.00000762939453" transform="matrix(1,0,0,1,375,458)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -477,7 +477,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="91" transform="matrix(1,0,0,1,732,91)">
+        <g fill="none" x="625.0000076293945" y="422.00000762939453" transform="matrix(1,0,0,1,625,422)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -489,7 +489,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="127" transform="matrix(1,0,0,1,732,127)">
+        <g fill="none" x="625.0000076293945" y="458.00000762939453" transform="matrix(1,0,0,1,625,458)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -501,7 +501,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="163" transform="matrix(1,0,0,1,732,163)">
+        <g fill="none" x="625.0000076293945" y="494.00000762939453" transform="matrix(1,0,0,1,625,494)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -513,7 +513,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="482" y="281" transform="matrix(1,0,0,1,482,281)">
+        <g fill="none" x="375.00000762939453" y="612.0000076293945" transform="matrix(1,0,0,1,375,612)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -525,7 +525,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="209" transform="matrix(1,0,0,1,732,209)">
+        <g fill="none" x="625.0000076293945" y="540.0000076293945" transform="matrix(1,0,0,1,625,540)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -537,7 +537,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="245" transform="matrix(1,0,0,1,732,245)">
+        <g fill="none" x="625.0000076293945" y="576.0000076293945" transform="matrix(1,0,0,1,625,576)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -549,7 +549,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="281" transform="matrix(1,0,0,1,732,281)">
+        <g fill="none" x="625.0000076293945" y="612.0000076293945" transform="matrix(1,0,0,1,625,612)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -561,7 +561,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="317" transform="matrix(1,0,0,1,732,317)">
+        <g fill="none" x="625.0000076293945" y="648.0000076293945" transform="matrix(1,0,0,1,625,648)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -573,7 +573,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="732" y="353" transform="matrix(1,0,0,1,732,353)">
+        <g fill="none" x="625.0000076293945" y="684.0000076293945" transform="matrix(1,0,0,1,625,684)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
diff --git a/packages/g6/__tests__/snapshots/layouts/dendrogram/tb.svg b/packages/g6/__tests__/snapshots/layouts/dendrogram/tb.svg
index 7b84e16fa6b..f8cfdb1e234 100644
--- a/packages/g6/__tests__/snapshots/layouts/dendrogram/tb.svg
+++ b/packages/g6/__tests__/snapshots/layouts/dendrogram/tb.svg
@@ -1,219 +1,219 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
   <defs/>
-  <g transform="matrix(0.503018,0,0,0.503018,274.647888,147.716293)">
+  <g transform="matrix(0.503018,0,0,0.503018,124.748497,70.251503)">
     <g fill="none">
       <g fill="none">
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -18,-38 C -18 46,-388 46,-388 130" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 280,116.00000762939453 C 280 200.00000381469727,-89.99999237060547 200.00000381469727,-89.99999237060547 284" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -18,-38 C -18 -4,42 -4,42 30" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 280,116.00000762939453 C 280 150.00000381469727,340 150.00000381469727,340 184" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -18,-38 C -18 46,352 46,352 130" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 280,116.00000762939453 C 280 200.00000381469727,650 200.00000381469727,650 284" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -388,162 C -388 196,-528 196,-528 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -89.99999237060547,316 C -89.99999237060547 350,-230 350,-230 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -388,162 C -388 196,-488 196,-488 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -89.99999237060547,316 C -89.99999237060547 350,-190 350,-190 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -388,162 C -388 196,-448 196,-448 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -89.99999237060547,316 C -89.99999237060547 350,-150 350,-150 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -388,162 C -388 196,-408 196,-408 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -89.99999237060547,316 C -89.99999237060547 350,-109.99999237060547 350,-109.99999237060547 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -388,162 C -388 196,-368 196,-368 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -89.99999237060547,316 C -89.99999237060547 350,-69.99999237060547 350,-69.99999237060547 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -388,162 C -388 196,-328 196,-328 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -89.99999237060547,316 C -89.99999237060547 350,-29.99999237060547 350,-29.99999237060547 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -388,162 C -388 196,-288 196,-288 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -89.99999237060547,316 C -89.99999237060547 350,10.000007629394531 350,10.000007629394531 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -388,162 C -388 196,-248 196,-248 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -89.99999237060547,316 C -89.99999237060547 350,50.00000762939453 350,50.00000762939453 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 42,62 C 42 96,-98 96,-98 130" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 340,216 C 340 250,200 250,200 284" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 42,62 C 42 96,72 96,72 130" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 340,216 C 340 250,370 250,370 284" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 42,62 C 42 96,182 96,182 130" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 340,216 C 340 250,480 250,480 284" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -98,162 C -98 196,-198 196,-198 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 200,316 C 200 350,100.00000762939453 350,100.00000762939453 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -98,162 C -98 196,-158 196,-158 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 200,316 C 200 350,140 350,140 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -98,162 C -98 196,-118 196,-118 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 200,316 C 200 350,180 350,180 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -98,162 C -98 196,-78 196,-78 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 200,316 C 200 350,220 350,220 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -98,162 C -98 196,-38 196,-38 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 200,316 C 200 350,260 350,260 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -98,162 C -98 196,2 196,2 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 200,316 C 200 350,300 350,300 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 72,162 C 72 196,52 196,52 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 370,316 C 370 350,350 350,350 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 72,162 C 72 196,92 196,92 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 370,316 C 370 350,390 350,390 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 182,162 C 182 196,142 196,142 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 480,316 C 480 350,440 350,440 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 182,162 C 182 196,182 196,182 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 480,316 C 480 350,480 350,480 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 182,162 C 182 196,222 196,222 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 480,316 C 480 350,520 350,520 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 352,162 C 352 196,272 196,272 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 650,316 C 650 350,570 350,570 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 352,162 C 352 196,312 196,312 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 650,316 C 650 350,610 350,610 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 352,162 C 352 196,352 196,352 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 650,316 C 650 350,650 350,650 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 352,162 C 352 196,392 196,392 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 650,316 C 650 350,690 350,690 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 352,162 C 352 196,432 196,432 230" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 650,316 C 650 350,730 350,730 384" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 0,16 C 0 16,0 16,0 16" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
-        <g fill="none" x="-18" y="-54" transform="matrix(1,0,0,1,-18,-54)">
+        <g fill="none" x="280.00000762939453" y="100.00000762939453" transform="matrix(1,0,0,1,280,100.000008)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -225,7 +225,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-388" y="146" transform="matrix(1,0,0,1,-388,146)">
+        <g fill="none" x="-89.99999237060547" y="300.00000762939453" transform="matrix(1,0,0,1,-89.999992,300)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -237,7 +237,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-528" y="246" transform="matrix(0,1,-1,0,-528,246)">
+        <g fill="none" x="-229.99999237060547" y="400.00000762939453" transform="matrix(0,1,-1,0,-230,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -249,7 +249,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-488" y="246" transform="matrix(0,1,-1,0,-488,246)">
+        <g fill="none" x="-189.99999237060547" y="400.00000762939453" transform="matrix(0,1,-1,0,-190,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -261,7 +261,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-448" y="246" transform="matrix(0,1,-1,0,-448,246)">
+        <g fill="none" x="-149.99999237060547" y="400.00000762939453" transform="matrix(0,1,-1,0,-150,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -273,7 +273,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-408" y="246" transform="matrix(0,1,-1,0,-408,246)">
+        <g fill="none" x="-109.99999237060547" y="400.00000762939453" transform="matrix(0,1,-1,0,-109.999992,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -285,7 +285,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-368" y="246" transform="matrix(0,1,-1,0,-368,246)">
+        <g fill="none" x="-69.99999237060547" y="400.00000762939453" transform="matrix(0,1,-1,0,-69.999992,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -297,7 +297,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-328" y="246" transform="matrix(0,1,-1,0,-328,246)">
+        <g fill="none" x="-29.99999237060547" y="400.00000762939453" transform="matrix(0,1,-1,0,-29.999992,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -309,7 +309,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-288" y="246" transform="matrix(0,1,-1,0,-288,246)">
+        <g fill="none" x="10.000007629394531" y="400.00000762939453" transform="matrix(0,1,-1,0,10.000008,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -321,7 +321,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-248" y="246" transform="matrix(0,1,-1,0,-248,246)">
+        <g fill="none" x="50.00000762939453" y="400.00000762939453" transform="matrix(0,1,-1,0,50.000008,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -333,7 +333,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="42" y="46" transform="matrix(1,0,0,1,42,46)">
+        <g fill="none" x="340.00000762939453" y="200.00000762939453" transform="matrix(1,0,0,1,340,200)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -345,7 +345,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-98" y="146" transform="matrix(1,0,0,1,-98,146)">
+        <g fill="none" x="200.00000762939453" y="300.00000762939453" transform="matrix(1,0,0,1,200,300)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -357,7 +357,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-198" y="246" transform="matrix(0,1,-1,0,-198,246)">
+        <g fill="none" x="100.00000762939453" y="400.00000762939453" transform="matrix(0,1,-1,0,100.000008,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -369,7 +369,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-158" y="246" transform="matrix(0,1,-1,0,-158,246)">
+        <g fill="none" x="140.00000762939453" y="400.00000762939453" transform="matrix(0,1,-1,0,140,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -381,7 +381,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-118" y="246" transform="matrix(0,1,-1,0,-118,246)">
+        <g fill="none" x="180.00000762939453" y="400.00000762939453" transform="matrix(0,1,-1,0,180,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -393,7 +393,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-78" y="246" transform="matrix(0,1,-1,0,-78,246)">
+        <g fill="none" x="220.00000762939453" y="400.00000762939453" transform="matrix(0,1,-1,0,220,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -405,7 +405,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-38" y="246" transform="matrix(0,1,-1,0,-38,246)">
+        <g fill="none" x="260.00000762939453" y="400.00000762939453" transform="matrix(0,1,-1,0,260,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -417,7 +417,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="2" y="246" transform="matrix(0,1,-1,0,2,246)">
+        <g fill="none" x="300.00000762939453" y="400.00000762939453" transform="matrix(0,1,-1,0,300,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -429,7 +429,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="72" y="146" transform="matrix(1,0,0,1,72,146)">
+        <g fill="none" x="370.00000762939453" y="300.00000762939453" transform="matrix(1,0,0,1,370,300)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -441,7 +441,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="52" y="246" transform="matrix(0,1,-1,0,52,246)">
+        <g fill="none" x="350.00000762939453" y="400.00000762939453" transform="matrix(0,1,-1,0,350,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -453,7 +453,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="92" y="246" transform="matrix(0,1,-1,0,92,246)">
+        <g fill="none" x="390.00000762939453" y="400.00000762939453" transform="matrix(0,1,-1,0,390,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -465,7 +465,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="182" y="146" transform="matrix(1,0,0,1,182,146)">
+        <g fill="none" x="480.00000762939453" y="300.00000762939453" transform="matrix(1,0,0,1,480,300)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -477,7 +477,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="142" y="246" transform="matrix(0,1,-1,0,142,246)">
+        <g fill="none" x="440.00000762939453" y="400.00000762939453" transform="matrix(0,1,-1,0,440,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -489,7 +489,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="182" y="246" transform="matrix(0,1,-1,0,182,246)">
+        <g fill="none" x="480.00000762939453" y="400.00000762939453" transform="matrix(0,1,-1,0,480,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -501,7 +501,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="222" y="246" transform="matrix(0,1,-1,0,222,246)">
+        <g fill="none" x="520.0000076293945" y="400.00000762939453" transform="matrix(0,1,-1,0,520,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -513,7 +513,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="352" y="146" transform="matrix(1,0,0,1,352,146)">
+        <g fill="none" x="650.0000076293945" y="300.00000762939453" transform="matrix(1,0,0,1,650,300)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -525,7 +525,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="272" y="246" transform="matrix(0,1,-1,0,272,246)">
+        <g fill="none" x="570.0000076293945" y="400.00000762939453" transform="matrix(0,1,-1,0,570,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -537,7 +537,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="312" y="246" transform="matrix(0,1,-1,0,312,246)">
+        <g fill="none" x="610.0000076293945" y="400.00000762939453" transform="matrix(0,1,-1,0,610,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -549,7 +549,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="352" y="246" transform="matrix(0,1,-1,0,352,246)">
+        <g fill="none" x="650.0000076293945" y="400.00000762939453" transform="matrix(0,1,-1,0,650,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -561,7 +561,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="392" y="246" transform="matrix(0,1,-1,0,392,246)">
+        <g fill="none" x="690.0000076293945" y="400.00000762939453" transform="matrix(0,1,-1,0,690,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -573,7 +573,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="432" y="246" transform="matrix(0,1,-1,0,432,246)">
+        <g fill="none" x="730.0000076293945" y="400.00000762939453" transform="matrix(0,1,-1,0,730,400)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
diff --git a/packages/g6/__tests__/snapshots/layouts/mindmap/h-custom-side.svg b/packages/g6/__tests__/snapshots/layouts/mindmap/h-custom-side.svg
index 857b3e3203a..4033b20fade 100644
--- a/packages/g6/__tests__/snapshots/layouts/mindmap/h-custom-side.svg
+++ b/packages/g6/__tests__/snapshots/layouts/mindmap/h-custom-side.svg
@@ -1,243 +1,243 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
   <defs/>
-  <g transform="matrix(0.537334,0,0,0.537334,276.404602,301.181061)">
+  <g transform="matrix(0.537334,0,0,0.537334,115.204391,115.532166)">
     <g fill="none">
       <g fill="none">
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -121,-28 C -166 -28,-166 -28,-211 -28" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 179,317.5 C 134.00000381469727 317.5,134.00000381469727 317.5,89.00000762939453 317.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -95,-28 C -50 -28,-50 -158.5,-5 -158.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 205,317.5 C 250 317.5,250 187,295 187" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -95,-28 C -50 -28,-50 102.5,-5 102.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 205,317.5 C 250 317.5,250 448,295 448" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -237,-28 C -282 -28,-282 -154,-327 -154" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 63.00000762939453,317.5 C 18.00000762939453 317.5,18.00000762939453 191.5,-26.99999237060547 191.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -237,-28 C -282 -28,-282 -118,-327 -118" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 63.00000762939453,317.5 C 18.00000762939453 317.5,18.00000762939453 227.5,-26.99999237060547 227.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -237,-28 C -282 -28,-282 -82,-327 -82" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 63.00000762939453,317.5 C 18.00000762939453 317.5,18.00000762939453 263.5,-26.99999237060547 263.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -237,-28 C -282 -28,-282 -46,-327 -46" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 63.00000762939453,317.5 C 18.00000762939453 317.5,18.00000762939453 299.5,-26.99999237060547 299.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -237,-28 C -282 -28,-282 -10,-327 -10" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 63.00000762939453,317.5 C 18.00000762939453 317.5,18.00000762939453 335.5,-26.99999237060547 335.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -237,-28 C -282 -28,-282 26,-327 26" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 63.00000762939453,317.5 C 18.00000762939453 317.5,18.00000762939453 371.5,-26.99999237060547 371.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -237,-28 C -282 -28,-282 62,-327 62" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 63.00000762939453,317.5 C 18.00000762939453 317.5,18.00000762939453 407.5,-26.99999237060547 407.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -237,-28 C -282 -28,-282 98,-327 98" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 63.00000762939453,317.5 C 18.00000762939453 317.5,18.00000762939453 443.5,-26.99999237060547 443.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-158.5 C 66 -158.5,66 -275.5,111 -275.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,187 C 366 187,366 70.00000762939453,411 70.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-158.5 C 66 -158.5,66 -131.5,111 -131.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,187 C 366 187,366 214,411 214" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-158.5 C 66 -158.5,66 -41.5,111 -41.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,187 C 366 187,366 304,411 304" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,-275.5 C 182 -275.5,182 -365.5,227 -365.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,70.00000762939453 C 482 70.00000762939453,482 -19.99999237060547,527 -19.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,-275.5 C 182 -275.5,182 -329.5,227 -329.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,70.00000762939453 C 482 70.00000762939453,482 16.00000762939453,527 16.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,-275.5 C 182 -275.5,182 -293.5,227 -293.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,70.00000762939453 C 482 70.00000762939453,482 52.00000762939453,527 52.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,-275.5 C 182 -275.5,182 -257.5,227 -257.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,70.00000762939453 C 482 70.00000762939453,482 88.00000762939453,527 88.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,-275.5 C 182 -275.5,182 -221.5,227 -221.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,70.00000762939453 C 482 70.00000762939453,482 124.00000762939453,527 124.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,-275.5 C 182 -275.5,182 -185.5,227 -185.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,70.00000762939453 C 482 70.00000762939453,482 160,527 160" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,-131.5 C 182 -131.5,182 -149.5,227 -149.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,214 C 482 214,482 196,527 196" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,-131.5 C 182 -131.5,182 -113.5,227 -113.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,214 C 482 214,482 232,527 232" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,-41.5 C 182 -41.5,182 -77.5,227 -77.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,304 C 482 304,482 268,527 268" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,-41.5 C 182 -41.5,182 -41.5,227 -41.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,304 C 482 304,482 304,527 304" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,-41.5 C 182 -41.5,182 -5.5,227 -5.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,304 C 482 304,482 340,527 340" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,102.5 C 66 102.5,66 30.5,111 30.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,448 C 366 448,366 376,411 376" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,102.5 C 66 102.5,66 66.5,111 66.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,448 C 366 448,366 412,411 412" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,102.5 C 66 102.5,66 102.5,111 102.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,448 C 366 448,366 448,411 448" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,102.5 C 66 102.5,66 138.5,111 138.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,448 C 366 448,366 484,411 484" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,102.5 C 66 102.5,66 174.5,111 174.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,448 C 366 448,366 520,411 520" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
-        <g fill="none" x="-108" y="-28" transform="matrix(1,0,0,1,-108,-28)">
+        <g fill="none" x="192.00000762939453" y="317.50000762939453" transform="matrix(1,0,0,1,192,317.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
-          <g fill="none" class="label" transform="matrix(1,0,0,1,-13,2)">
+          <g fill="none" class="label" transform="matrix(1,0,0,1,13,2)">
             <g>
-              <text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" class="text" font-size="12" font-family="system-ui, sans-serif" text-anchor="end" fill-opacity="0.85" font-weight="400">
+              <text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" class="text" font-size="12" font-family="system-ui, sans-serif" text-anchor="left" fill-opacity="0.85" font-weight="400">
                 Modeling Methods
               </text>
             </g>
           </g>
         </g>
-        <g fill="none" x="-224" y="-28" transform="matrix(1,0,0,1,-224,-28)">
+        <g fill="none" x="76.00000762939453" y="317.50000762939453" transform="matrix(1,0,0,1,76.000008,317.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
-          <g fill="none" class="label" transform="matrix(1,0,0,1,-13,2)">
+          <g fill="none" class="label" transform="matrix(1,0,0,1,13,2)">
             <g>
-              <text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" class="text" font-size="12" font-family="system-ui, sans-serif" text-anchor="end" fill-opacity="0.85" font-weight="400">
+              <text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" class="text" font-size="12" font-family="system-ui, sans-serif" text-anchor="left" fill-opacity="0.85" font-weight="400">
                 Classification
               </text>
             </g>
           </g>
         </g>
-        <g fill="none" x="-340" y="-154" transform="matrix(1,0,0,1,-340,-154)">
+        <g fill="none" x="-39.99999237060547" y="191.50000762939453" transform="matrix(1,0,0,1,-39.999992,191.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -249,7 +249,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-340" y="-118" transform="matrix(1,0,0,1,-340,-118)">
+        <g fill="none" x="-39.99999237060547" y="227.50000762939453" transform="matrix(1,0,0,1,-39.999992,227.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -261,7 +261,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-340" y="-82" transform="matrix(1,0,0,1,-340,-82)">
+        <g fill="none" x="-39.99999237060547" y="263.50000762939453" transform="matrix(1,0,0,1,-39.999992,263.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -273,7 +273,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-340" y="-46" transform="matrix(1,0,0,1,-340,-46)">
+        <g fill="none" x="-39.99999237060547" y="299.50000762939453" transform="matrix(1,0,0,1,-39.999992,299.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -285,7 +285,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-340" y="-10" transform="matrix(1,0,0,1,-340,-10)">
+        <g fill="none" x="-39.99999237060547" y="335.50000762939453" transform="matrix(1,0,0,1,-39.999992,335.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -297,7 +297,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-340" y="26" transform="matrix(1,0,0,1,-340,26)">
+        <g fill="none" x="-39.99999237060547" y="371.50000762939453" transform="matrix(1,0,0,1,-39.999992,371.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -309,7 +309,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-340" y="62" transform="matrix(1,0,0,1,-340,62)">
+        <g fill="none" x="-39.99999237060547" y="407.50000762939453" transform="matrix(1,0,0,1,-39.999992,407.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -321,7 +321,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-340" y="98" transform="matrix(1,0,0,1,-340,98)">
+        <g fill="none" x="-39.99999237060547" y="443.50000762939453" transform="matrix(1,0,0,1,-39.999992,443.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -333,7 +333,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="8" y="-158.5" transform="matrix(1,0,0,1,8,-158.500000)">
+        <g fill="none" x="308.00000762939453" y="187.00000762939453" transform="matrix(1,0,0,1,308,187)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -345,7 +345,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="-275.5" transform="matrix(1,0,0,1,124,-275.500000)">
+        <g fill="none" x="424.00000762939453" y="70.00000762939453" transform="matrix(1,0,0,1,424,70.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -357,7 +357,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="-365.5" transform="matrix(1,0,0,1,240,-365.500000)">
+        <g fill="none" x="540.0000076293945" y="-19.99999237060547" transform="matrix(1,0,0,1,540,-19.999992)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -369,7 +369,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="-329.5" transform="matrix(1,0,0,1,240,-329.500000)">
+        <g fill="none" x="540.0000076293945" y="16.00000762939453" transform="matrix(1,0,0,1,540,16.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -381,7 +381,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="-293.5" transform="matrix(1,0,0,1,240,-293.500000)">
+        <g fill="none" x="540.0000076293945" y="52.00000762939453" transform="matrix(1,0,0,1,540,52.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -393,7 +393,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="-257.5" transform="matrix(1,0,0,1,240,-257.500000)">
+        <g fill="none" x="540.0000076293945" y="88.00000762939453" transform="matrix(1,0,0,1,540,88.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -405,7 +405,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="-221.5" transform="matrix(1,0,0,1,240,-221.500000)">
+        <g fill="none" x="540.0000076293945" y="124.00000762939453" transform="matrix(1,0,0,1,540,124.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -417,7 +417,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="-185.5" transform="matrix(1,0,0,1,240,-185.500000)">
+        <g fill="none" x="540.0000076293945" y="160.00000762939453" transform="matrix(1,0,0,1,540,160)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -429,7 +429,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="-131.5" transform="matrix(1,0,0,1,124,-131.500000)">
+        <g fill="none" x="424.00000762939453" y="214.00000762939453" transform="matrix(1,0,0,1,424,214)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -441,7 +441,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="-149.5" transform="matrix(1,0,0,1,240,-149.500000)">
+        <g fill="none" x="540.0000076293945" y="196.00000762939453" transform="matrix(1,0,0,1,540,196)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -453,7 +453,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="-113.5" transform="matrix(1,0,0,1,240,-113.500000)">
+        <g fill="none" x="540.0000076293945" y="232.00000762939453" transform="matrix(1,0,0,1,540,232)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -465,7 +465,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="-41.5" transform="matrix(1,0,0,1,124,-41.500000)">
+        <g fill="none" x="424.00000762939453" y="304.00000762939453" transform="matrix(1,0,0,1,424,304)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -477,7 +477,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="-77.5" transform="matrix(1,0,0,1,240,-77.500000)">
+        <g fill="none" x="540.0000076293945" y="268.00000762939453" transform="matrix(1,0,0,1,540,268)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -489,7 +489,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="-41.5" transform="matrix(1,0,0,1,240,-41.500000)">
+        <g fill="none" x="540.0000076293945" y="304.00000762939453" transform="matrix(1,0,0,1,540,304)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -501,7 +501,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="-5.5" transform="matrix(1,0,0,1,240,-5.500000)">
+        <g fill="none" x="540.0000076293945" y="340.00000762939453" transform="matrix(1,0,0,1,540,340)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -513,7 +513,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="8" y="102.5" transform="matrix(1,0,0,1,8,102.500000)">
+        <g fill="none" x="308.00000762939453" y="448.00000762939453" transform="matrix(1,0,0,1,308,448)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -525,7 +525,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="30.5" transform="matrix(1,0,0,1,124,30.500000)">
+        <g fill="none" x="424.00000762939453" y="376.00000762939453" transform="matrix(1,0,0,1,424,376)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -537,7 +537,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="66.5" transform="matrix(1,0,0,1,124,66.500000)">
+        <g fill="none" x="424.00000762939453" y="412.00000762939453" transform="matrix(1,0,0,1,424,412)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -549,7 +549,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="102.5" transform="matrix(1,0,0,1,124,102.500000)">
+        <g fill="none" x="424.00000762939453" y="448.00000762939453" transform="matrix(1,0,0,1,424,448)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -561,7 +561,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="138.5" transform="matrix(1,0,0,1,124,138.500000)">
+        <g fill="none" x="424.00000762939453" y="484.00000762939453" transform="matrix(1,0,0,1,424,484)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -573,7 +573,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="174.5" transform="matrix(1,0,0,1,124,174.500000)">
+        <g fill="none" x="424.00000762939453" y="520.0000076293945" transform="matrix(1,0,0,1,424,520)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
diff --git a/packages/g6/__tests__/snapshots/layouts/mindmap/h-left.svg b/packages/g6/__tests__/snapshots/layouts/mindmap/h-left.svg
index 37a1d9bec07..3c3458af123 100644
--- a/packages/g6/__tests__/snapshots/layouts/mindmap/h-left.svg
+++ b/packages/g6/__tests__/snapshots/layouts/mindmap/h-left.svg
@@ -1,219 +1,219 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
   <defs/>
-  <g transform="matrix(0.585137,0,0,0.585137,608.724426,282.036285)">
+  <g transform="matrix(0.585137,0,0,0.585137,151.146866,103.569336)">
     <g fill="none">
       <g fill="none">
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -221,-28 C -316 -28,-316 -343,-411 -343" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 561,277 C 466 277,466 -37.99999237060547,371 -37.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -221,-28 C -316 -28,-316 26,-411 26" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 561,277 C 466 277,466 331,371 331" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -221,-28 C -316 -28,-316 287,-411 287" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 561,277 C 466 277,466 592,371 592" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -437,-343 C -532 -343,-532 -469,-627 -469" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 345,-37.99999237060547 C 250 -37.99999237060547,250 -164,155 -164" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -437,-343 C -532 -343,-532 -433,-627 -433" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 345,-37.99999237060547 C 250 -37.99999237060547,250 -127.99999237060547,155 -127.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -437,-343 C -532 -343,-532 -397,-627 -397" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 345,-37.99999237060547 C 250 -37.99999237060547,250 -91.99999237060547,155 -91.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -437,-343 C -532 -343,-532 -361,-627 -361" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 345,-37.99999237060547 C 250 -37.99999237060547,250 -55.99999237060547,155 -55.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -437,-343 C -532 -343,-532 -325,-627 -325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 345,-37.99999237060547 C 250 -37.99999237060547,250 -19.99999237060547,155 -19.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -437,-343 C -532 -343,-532 -289,-627 -289" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 345,-37.99999237060547 C 250 -37.99999237060547,250 16.00000762939453,155 16.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -437,-343 C -532 -343,-532 -253,-627 -253" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 345,-37.99999237060547 C 250 -37.99999237060547,250 52.00000762939453,155 52.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -437,-343 C -532 -343,-532 -217,-627 -217" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 345,-37.99999237060547 C 250 -37.99999237060547,250 88.00000762939453,155 88.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -437,26 C -532 26,-532 -91,-627 -91" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 345,331 C 250 331,250 214,155 214" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -437,26 C -532 26,-532 53,-627 53" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 345,331 C 250 331,250 358,155 358" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -437,26 C -532 26,-532 143,-627 143" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 345,331 C 250 331,250 448,155 448" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -653,-91 C -748 -91,-748 -181,-843 -181" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 129,214 C 34.000003814697266 214,34.000003814697266 124.00000762939453,-60.99999237060547 124.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -653,-91 C -748 -91,-748 -145,-843 -145" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 129,214 C 34.000003814697266 214,34.000003814697266 160,-60.99999237060547 160" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -653,-91 C -748 -91,-748 -109,-843 -109" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 129,214 C 34.000003814697266 214,34.000003814697266 196,-60.99999237060547 196" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -653,-91 C -748 -91,-748 -73,-843 -73" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 129,214 C 34.000003814697266 214,34.000003814697266 232,-60.99999237060547 232" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -653,-91 C -748 -91,-748 -37,-843 -37" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 129,214 C 34.000003814697266 214,34.000003814697266 268,-60.99999237060547 268" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -653,-91 C -748 -91,-748 -1,-843 -1" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 129,214 C 34.000003814697266 214,34.000003814697266 304,-60.99999237060547 304" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -653,53 C -748 53,-748 35,-843 35" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 129,358 C 34.000003814697266 358,34.000003814697266 340,-60.99999237060547 340" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -653,53 C -748 53,-748 71,-843 71" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 129,358 C 34.000003814697266 358,34.000003814697266 376,-60.99999237060547 376" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -653,143 C -748 143,-748 107,-843 107" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 129,448 C 34.000003814697266 448,34.000003814697266 412,-60.99999237060547 412" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -653,143 C -748 143,-748 143,-843 143" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 129,448 C 34.000003814697266 448,34.000003814697266 448,-60.99999237060547 448" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -653,143 C -748 143,-748 179,-843 179" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 129,448 C 34.000003814697266 448,34.000003814697266 484,-60.99999237060547 484" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -437,287 C -532 287,-532 215,-627 215" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 345,592 C 250 592,250 520,155 520" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -437,287 C -532 287,-532 251,-627 251" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 345,592 C 250 592,250 556,155 556" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -437,287 C -532 287,-532 287,-627 287" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 345,592 C 250 592,250 592,155 592" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -437,287 C -532 287,-532 323,-627 323" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 345,592 C 250 592,250 628,155 628" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -437,287 C -532 287,-532 359,-627 359" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 345,592 C 250 592,250 664,155 664" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
-        <g fill="none" x="-208" y="-28" transform="matrix(1,0,0,1,-208,-28)">
+        <g fill="none" x="574.0000076293945" y="277.00000762939453" transform="matrix(1,0,0,1,574,277)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -225,7 +225,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-424" y="-343" transform="matrix(1,0,0,1,-424,-343)">
+        <g fill="none" x="358.00000762939453" y="-37.99999237060547" transform="matrix(1,0,0,1,358,-37.999992)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -237,7 +237,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-640" y="-469" transform="matrix(1,0,0,1,-640,-469)">
+        <g fill="none" x="142.00000762939453" y="-163.99999237060547" transform="matrix(1,0,0,1,142,-164)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -249,7 +249,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-640" y="-433" transform="matrix(1,0,0,1,-640,-433)">
+        <g fill="none" x="142.00000762939453" y="-127.99999237060547" transform="matrix(1,0,0,1,142,-127.999992)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -261,7 +261,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-640" y="-397" transform="matrix(1,0,0,1,-640,-397)">
+        <g fill="none" x="142.00000762939453" y="-91.99999237060547" transform="matrix(1,0,0,1,142,-91.999992)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -273,7 +273,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-640" y="-361" transform="matrix(1,0,0,1,-640,-361)">
+        <g fill="none" x="142.00000762939453" y="-55.99999237060547" transform="matrix(1,0,0,1,142,-55.999992)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -285,7 +285,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-640" y="-325" transform="matrix(1,0,0,1,-640,-325)">
+        <g fill="none" x="142.00000762939453" y="-19.99999237060547" transform="matrix(1,0,0,1,142,-19.999992)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -297,7 +297,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-640" y="-289" transform="matrix(1,0,0,1,-640,-289)">
+        <g fill="none" x="142.00000762939453" y="16.00000762939453" transform="matrix(1,0,0,1,142,16.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -309,7 +309,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-640" y="-253" transform="matrix(1,0,0,1,-640,-253)">
+        <g fill="none" x="142.00000762939453" y="52.00000762939453" transform="matrix(1,0,0,1,142,52.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -321,7 +321,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-640" y="-217" transform="matrix(1,0,0,1,-640,-217)">
+        <g fill="none" x="142.00000762939453" y="88.00000762939453" transform="matrix(1,0,0,1,142,88.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -333,7 +333,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-424" y="26" transform="matrix(1,0,0,1,-424,26)">
+        <g fill="none" x="358.00000762939453" y="331.00000762939453" transform="matrix(1,0,0,1,358,331)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -345,7 +345,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-640" y="-91" transform="matrix(1,0,0,1,-640,-91)">
+        <g fill="none" x="142.00000762939453" y="214.00000762939453" transform="matrix(1,0,0,1,142,214)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -357,7 +357,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-856" y="-181" transform="matrix(1,0,0,1,-856,-181)">
+        <g fill="none" x="-73.99999237060547" y="124.00000762939453" transform="matrix(1,0,0,1,-73.999992,124.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -369,7 +369,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-856" y="-145" transform="matrix(1,0,0,1,-856,-145)">
+        <g fill="none" x="-73.99999237060547" y="160.00000762939453" transform="matrix(1,0,0,1,-73.999992,160)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -381,7 +381,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-856" y="-109" transform="matrix(1,0,0,1,-856,-109)">
+        <g fill="none" x="-73.99999237060547" y="196.00000762939453" transform="matrix(1,0,0,1,-73.999992,196)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -393,7 +393,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-856" y="-73" transform="matrix(1,0,0,1,-856,-73)">
+        <g fill="none" x="-73.99999237060547" y="232.00000762939453" transform="matrix(1,0,0,1,-73.999992,232)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -405,7 +405,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-856" y="-37" transform="matrix(1,0,0,1,-856,-37)">
+        <g fill="none" x="-73.99999237060547" y="268.00000762939453" transform="matrix(1,0,0,1,-73.999992,268)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -417,7 +417,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-856" y="-1" transform="matrix(1,0,0,1,-856,-1)">
+        <g fill="none" x="-73.99999237060547" y="304.00000762939453" transform="matrix(1,0,0,1,-73.999992,304)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -429,7 +429,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-640" y="53" transform="matrix(1,0,0,1,-640,53)">
+        <g fill="none" x="142.00000762939453" y="358.00000762939453" transform="matrix(1,0,0,1,142,358)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -441,7 +441,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-856" y="35" transform="matrix(1,0,0,1,-856,35)">
+        <g fill="none" x="-73.99999237060547" y="340.00000762939453" transform="matrix(1,0,0,1,-73.999992,340)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -453,7 +453,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-856" y="71" transform="matrix(1,0,0,1,-856,71)">
+        <g fill="none" x="-73.99999237060547" y="376.00000762939453" transform="matrix(1,0,0,1,-73.999992,376)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -465,7 +465,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-640" y="143" transform="matrix(1,0,0,1,-640,143)">
+        <g fill="none" x="142.00000762939453" y="448.00000762939453" transform="matrix(1,0,0,1,142,448)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -477,7 +477,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-856" y="107" transform="matrix(1,0,0,1,-856,107)">
+        <g fill="none" x="-73.99999237060547" y="412.00000762939453" transform="matrix(1,0,0,1,-73.999992,412)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -489,7 +489,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-856" y="143" transform="matrix(1,0,0,1,-856,143)">
+        <g fill="none" x="-73.99999237060547" y="448.00000762939453" transform="matrix(1,0,0,1,-73.999992,448)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -501,7 +501,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-856" y="179" transform="matrix(1,0,0,1,-856,179)">
+        <g fill="none" x="-73.99999237060547" y="484.00000762939453" transform="matrix(1,0,0,1,-73.999992,484)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -513,7 +513,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-424" y="287" transform="matrix(1,0,0,1,-424,287)">
+        <g fill="none" x="358.00000762939453" y="592.0000076293945" transform="matrix(1,0,0,1,358,592)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -525,7 +525,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-640" y="215" transform="matrix(1,0,0,1,-640,215)">
+        <g fill="none" x="142.00000762939453" y="520.0000076293945" transform="matrix(1,0,0,1,142,520)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -537,7 +537,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-640" y="251" transform="matrix(1,0,0,1,-640,251)">
+        <g fill="none" x="142.00000762939453" y="556.0000076293945" transform="matrix(1,0,0,1,142,556)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -549,7 +549,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-640" y="287" transform="matrix(1,0,0,1,-640,287)">
+        <g fill="none" x="142.00000762939453" y="592.0000076293945" transform="matrix(1,0,0,1,142,592)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -561,7 +561,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-640" y="323" transform="matrix(1,0,0,1,-640,323)">
+        <g fill="none" x="142.00000762939453" y="628.0000076293945" transform="matrix(1,0,0,1,142,628)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -573,7 +573,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-640" y="359" transform="matrix(1,0,0,1,-640,359)">
+        <g fill="none" x="142.00000762939453" y="664.0000076293945" transform="matrix(1,0,0,1,142,664)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
diff --git a/packages/g6/__tests__/snapshots/layouts/mindmap/h-right.svg b/packages/g6/__tests__/snapshots/layouts/mindmap/h-right.svg
index 4120f470357..1ddbeabe3a4 100644
--- a/packages/g6/__tests__/snapshots/layouts/mindmap/h-right.svg
+++ b/packages/g6/__tests__/snapshots/layouts/mindmap/h-right.svg
@@ -1,219 +1,219 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
   <defs/>
-  <g transform="matrix(0.585137,0,0,0.585137,134.400238,282.036285)">
+  <g transform="matrix(0.585137,0,0,0.585137,55.991798,103.569336)">
     <g fill="none">
       <g fill="none">
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -195,-28 C -100 -28,-100 -343,-5 -343" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -60.99999237060547,277 C 34.000003814697266 277,34.000003814697266 -37.99999237060547,129 -37.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -195,-28 C -100 -28,-100 26,-5 26" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -60.99999237060547,277 C 34.000003814697266 277,34.000003814697266 331,129 331" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -195,-28 C -100 -28,-100 287,-5 287" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -60.99999237060547,277 C 34.000003814697266 277,34.000003814697266 592,129 592" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-343 C 116 -343,116 -469,211 -469" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 155,-37.99999237060547 C 250 -37.99999237060547,250 -164,345 -164" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-343 C 116 -343,116 -433,211 -433" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 155,-37.99999237060547 C 250 -37.99999237060547,250 -127.99999237060547,345 -127.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-343 C 116 -343,116 -397,211 -397" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 155,-37.99999237060547 C 250 -37.99999237060547,250 -91.99999237060547,345 -91.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-343 C 116 -343,116 -361,211 -361" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 155,-37.99999237060547 C 250 -37.99999237060547,250 -55.99999237060547,345 -55.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-343 C 116 -343,116 -325,211 -325" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 155,-37.99999237060547 C 250 -37.99999237060547,250 -19.99999237060547,345 -19.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-343 C 116 -343,116 -289,211 -289" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 155,-37.99999237060547 C 250 -37.99999237060547,250 16.00000762939453,345 16.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-343 C 116 -343,116 -253,211 -253" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 155,-37.99999237060547 C 250 -37.99999237060547,250 52.00000762939453,345 52.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-343 C 116 -343,116 -217,211 -217" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 155,-37.99999237060547 C 250 -37.99999237060547,250 88.00000762939453,345 88.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,26 C 116 26,116 -91,211 -91" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 155,331 C 250 331,250 214,345 214" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,26 C 116 26,116 53,211 53" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 155,331 C 250 331,250 358,345 358" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,26 C 116 26,116 143,211 143" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 155,331 C 250 331,250 448,345 448" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 237,-91 C 332 -91,332 -181,427 -181" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 371,214 C 466 214,466 124.00000762939453,561 124.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 237,-91 C 332 -91,332 -145,427 -145" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 371,214 C 466 214,466 160,561 160" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 237,-91 C 332 -91,332 -109,427 -109" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 371,214 C 466 214,466 196,561 196" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 237,-91 C 332 -91,332 -73,427 -73" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 371,214 C 466 214,466 232,561 232" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 237,-91 C 332 -91,332 -37,427 -37" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 371,214 C 466 214,466 268,561 268" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 237,-91 C 332 -91,332 -1,427 -1" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 371,214 C 466 214,466 304,561 304" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 237,53 C 332 53,332 35,427 35" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 371,358 C 466 358,466 340,561 340" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 237,53 C 332 53,332 71,427 71" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 371,358 C 466 358,466 376,561 376" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 237,143 C 332 143,332 107,427 107" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 371,448 C 466 448,466 412,561 412" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 237,143 C 332 143,332 143,427 143" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 371,448 C 466 448,466 448,561 448" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 237,143 C 332 143,332 179,427 179" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 371,448 C 466 448,466 484,561 484" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,287 C 116 287,116 215,211 215" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 155,592 C 250 592,250 520,345 520" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,287 C 116 287,116 251,211 251" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 155,592 C 250 592,250 556,345 556" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,287 C 116 287,116 287,211 287" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 155,592 C 250 592,250 592,345 592" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,287 C 116 287,116 323,211 323" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 155,592 C 250 592,250 628,345 628" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,287 C 116 287,116 359,211 359" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 155,592 C 250 592,250 664,345 664" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
-        <g fill="none" x="-208" y="-28" transform="matrix(1,0,0,1,-208,-28)">
+        <g fill="none" x="-73.99999237060547" y="277.00000762939453" transform="matrix(1,0,0,1,-73.999992,277)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -225,7 +225,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="8" y="-343" transform="matrix(1,0,0,1,8,-343)">
+        <g fill="none" x="142.00000762939453" y="-37.99999237060547" transform="matrix(1,0,0,1,142,-37.999992)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -237,7 +237,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="224" y="-469" transform="matrix(1,0,0,1,224,-469)">
+        <g fill="none" x="358.00000762939453" y="-163.99999237060547" transform="matrix(1,0,0,1,358,-164)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -249,7 +249,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="224" y="-433" transform="matrix(1,0,0,1,224,-433)">
+        <g fill="none" x="358.00000762939453" y="-127.99999237060547" transform="matrix(1,0,0,1,358,-127.999992)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -261,7 +261,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="224" y="-397" transform="matrix(1,0,0,1,224,-397)">
+        <g fill="none" x="358.00000762939453" y="-91.99999237060547" transform="matrix(1,0,0,1,358,-91.999992)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -273,7 +273,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="224" y="-361" transform="matrix(1,0,0,1,224,-361)">
+        <g fill="none" x="358.00000762939453" y="-55.99999237060547" transform="matrix(1,0,0,1,358,-55.999992)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -285,7 +285,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="224" y="-325" transform="matrix(1,0,0,1,224,-325)">
+        <g fill="none" x="358.00000762939453" y="-19.99999237060547" transform="matrix(1,0,0,1,358,-19.999992)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -297,7 +297,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="224" y="-289" transform="matrix(1,0,0,1,224,-289)">
+        <g fill="none" x="358.00000762939453" y="16.00000762939453" transform="matrix(1,0,0,1,358,16.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -309,7 +309,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="224" y="-253" transform="matrix(1,0,0,1,224,-253)">
+        <g fill="none" x="358.00000762939453" y="52.00000762939453" transform="matrix(1,0,0,1,358,52.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -321,7 +321,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="224" y="-217" transform="matrix(1,0,0,1,224,-217)">
+        <g fill="none" x="358.00000762939453" y="88.00000762939453" transform="matrix(1,0,0,1,358,88.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -333,7 +333,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="8" y="26" transform="matrix(1,0,0,1,8,26)">
+        <g fill="none" x="142.00000762939453" y="331.00000762939453" transform="matrix(1,0,0,1,142,331)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -345,7 +345,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="224" y="-91" transform="matrix(1,0,0,1,224,-91)">
+        <g fill="none" x="358.00000762939453" y="214.00000762939453" transform="matrix(1,0,0,1,358,214)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -357,7 +357,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="440" y="-181" transform="matrix(1,0,0,1,440,-181)">
+        <g fill="none" x="574.0000076293945" y="124.00000762939453" transform="matrix(1,0,0,1,574,124.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -369,7 +369,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="440" y="-145" transform="matrix(1,0,0,1,440,-145)">
+        <g fill="none" x="574.0000076293945" y="160.00000762939453" transform="matrix(1,0,0,1,574,160)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -381,7 +381,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="440" y="-109" transform="matrix(1,0,0,1,440,-109)">
+        <g fill="none" x="574.0000076293945" y="196.00000762939453" transform="matrix(1,0,0,1,574,196)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -393,7 +393,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="440" y="-73" transform="matrix(1,0,0,1,440,-73)">
+        <g fill="none" x="574.0000076293945" y="232.00000762939453" transform="matrix(1,0,0,1,574,232)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -405,7 +405,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="440" y="-37" transform="matrix(1,0,0,1,440,-37)">
+        <g fill="none" x="574.0000076293945" y="268.00000762939453" transform="matrix(1,0,0,1,574,268)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -417,7 +417,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="440" y="-1" transform="matrix(1,0,0,1,440,-1)">
+        <g fill="none" x="574.0000076293945" y="304.00000762939453" transform="matrix(1,0,0,1,574,304)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -429,7 +429,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="224" y="53" transform="matrix(1,0,0,1,224,53)">
+        <g fill="none" x="358.00000762939453" y="358.00000762939453" transform="matrix(1,0,0,1,358,358)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -441,7 +441,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="440" y="35" transform="matrix(1,0,0,1,440,35)">
+        <g fill="none" x="574.0000076293945" y="340.00000762939453" transform="matrix(1,0,0,1,574,340)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -453,7 +453,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="440" y="71" transform="matrix(1,0,0,1,440,71)">
+        <g fill="none" x="574.0000076293945" y="376.00000762939453" transform="matrix(1,0,0,1,574,376)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -465,7 +465,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="224" y="143" transform="matrix(1,0,0,1,224,143)">
+        <g fill="none" x="358.00000762939453" y="448.00000762939453" transform="matrix(1,0,0,1,358,448)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -477,7 +477,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="440" y="107" transform="matrix(1,0,0,1,440,107)">
+        <g fill="none" x="574.0000076293945" y="412.00000762939453" transform="matrix(1,0,0,1,574,412)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -489,7 +489,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="440" y="143" transform="matrix(1,0,0,1,440,143)">
+        <g fill="none" x="574.0000076293945" y="448.00000762939453" transform="matrix(1,0,0,1,574,448)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -501,7 +501,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="440" y="179" transform="matrix(1,0,0,1,440,179)">
+        <g fill="none" x="574.0000076293945" y="484.00000762939453" transform="matrix(1,0,0,1,574,484)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -513,7 +513,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="8" y="287" transform="matrix(1,0,0,1,8,287)">
+        <g fill="none" x="142.00000762939453" y="592.0000076293945" transform="matrix(1,0,0,1,142,592)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -525,7 +525,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="224" y="215" transform="matrix(1,0,0,1,224,215)">
+        <g fill="none" x="358.00000762939453" y="520.0000076293945" transform="matrix(1,0,0,1,358,520)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -537,7 +537,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="224" y="251" transform="matrix(1,0,0,1,224,251)">
+        <g fill="none" x="358.00000762939453" y="556.0000076293945" transform="matrix(1,0,0,1,358,556)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -549,7 +549,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="224" y="287" transform="matrix(1,0,0,1,224,287)">
+        <g fill="none" x="358.00000762939453" y="592.0000076293945" transform="matrix(1,0,0,1,358,592)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -561,7 +561,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="224" y="323" transform="matrix(1,0,0,1,224,323)">
+        <g fill="none" x="358.00000762939453" y="628.0000076293945" transform="matrix(1,0,0,1,358,628)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -573,7 +573,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="224" y="359" transform="matrix(1,0,0,1,224,359)">
+        <g fill="none" x="358.00000762939453" y="664.0000076293945" transform="matrix(1,0,0,1,358,664)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
diff --git a/packages/g6/__tests__/snapshots/layouts/mindmap/h.svg b/packages/g6/__tests__/snapshots/layouts/mindmap/h.svg
index a42d663d821..eb92a6588d6 100644
--- a/packages/g6/__tests__/snapshots/layouts/mindmap/h.svg
+++ b/packages/g6/__tests__/snapshots/layouts/mindmap/h.svg
@@ -1,231 +1,231 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
   <defs/>
-  <g transform="matrix(0.500601,0,0,0.500601,291.690033,257.133545)">
+  <g transform="matrix(0.500601,0,0,0.500601,141.509811,124.724663)">
     <g fill="none">
       <g fill="none">
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -95,-28 C -50 -28,-50 -212.5,-5 -212.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 205,236.5 C 250 236.5,250 52.00000762939453,295 52.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -95,-28 C -50 -28,-50 156.5,-5 156.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 205,236.5 C 250 236.5,250 421,295 421" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -121,-28 C -166 -28,-166 -28,-211 -28" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 179,236.5 C 134.00000381469727 236.5,134.00000381469727 236.5,89.00000762939453 236.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-212.5 C 66 -212.5,66 -338.5,111 -338.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,52.00000762939453 C 366 52.00000762939453,366 -73.99999237060547,411 -73.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-212.5 C 66 -212.5,66 -302.5,111 -302.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,52.00000762939453 C 366 52.00000762939453,366 -37.99999237060547,411 -37.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-212.5 C 66 -212.5,66 -266.5,111 -266.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,52.00000762939453 C 366 52.00000762939453,366 -1.9999923706054688,411 -1.9999923706054688" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-212.5 C 66 -212.5,66 -230.5,111 -230.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,52.00000762939453 C 366 52.00000762939453,366 34.00000762939453,411 34.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-212.5 C 66 -212.5,66 -194.5,111 -194.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,52.00000762939453 C 366 52.00000762939453,366 70.00000762939453,411 70.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-212.5 C 66 -212.5,66 -158.5,111 -158.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,52.00000762939453 C 366 52.00000762939453,366 106.00000762939453,411 106.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-212.5 C 66 -212.5,66 -122.5,111 -122.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,52.00000762939453 C 366 52.00000762939453,366 142,411 142" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,-212.5 C 66 -212.5,66 -86.5,111 -86.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,52.00000762939453 C 366 52.00000762939453,366 178,411 178" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,156.5 C 66 156.5,66 39.5,111 39.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,421 C 366 421,366 304,411 304" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,156.5 C 66 156.5,66 183.5,111 183.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,421 C 366 421,366 448,411 448" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 21,156.5 C 66 156.5,66 273.5,111 273.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 321,421 C 366 421,366 538,411 538" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,39.5 C 182 39.5,182 -50.5,227 -50.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,304 C 482 304,482 214,527 214" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,39.5 C 182 39.5,182 -14.5,227 -14.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,304 C 482 304,482 250,527 250" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,39.5 C 182 39.5,182 21.5,227 21.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,304 C 482 304,482 286,527 286" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,39.5 C 182 39.5,182 57.5,227 57.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,304 C 482 304,482 322,527 322" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,39.5 C 182 39.5,182 93.5,227 93.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,304 C 482 304,482 358,527 358" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,39.5 C 182 39.5,182 129.5,227 129.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,304 C 482 304,482 394,527 394" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,183.5 C 182 183.5,182 165.5,227 165.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,448 C 482 448,482 430,527 430" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,183.5 C 182 183.5,182 201.5,227 201.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,448 C 482 448,482 466,527 466" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,273.5 C 182 273.5,182 237.5,227 237.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,538 C 482 538,482 502,527 502" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,273.5 C 182 273.5,182 273.5,227 273.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,538 C 482 538,482 538,527 538" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 137,273.5 C 182 273.5,182 309.5,227 309.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 437,538 C 482 538,482 574,527 574" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -237,-28 C -282 -28,-282 -100,-327 -100" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 63.00000762939453,236.5 C 18.00000762939453 236.5,18.00000762939453 164.5,-26.99999237060547 164.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -237,-28 C -282 -28,-282 -64,-327 -64" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 63.00000762939453,236.5 C 18.00000762939453 236.5,18.00000762939453 200.5,-26.99999237060547 200.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -237,-28 C -282 -28,-282 -28,-327 -28" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 63.00000762939453,236.5 C 18.00000762939453 236.5,18.00000762939453 236.5,-26.99999237060547 236.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -237,-28 C -282 -28,-282 8,-327 8" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 63.00000762939453,236.5 C 18.00000762939453 236.5,18.00000762939453 272.5,-26.99999237060547 272.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -237,-28 C -282 -28,-282 44,-327 44" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 63.00000762939453,236.5 C 18.00000762939453 236.5,18.00000762939453 308.5,-26.99999237060547 308.5" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 13,0 C 13 0,13 0,13 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
-        <g fill="none" x="-108" y="-28" transform="matrix(1,0,0,1,-108,-28)">
+        <g fill="none" x="192.00000762939453" y="236.50000762939453" transform="matrix(1,0,0,1,192,236.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
-          <g fill="none" class="label" transform="matrix(1,0,0,1,-13,2)">
+          <g fill="none" class="label" transform="matrix(1,0,0,1,13,2)">
             <g>
-              <text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" class="text" font-size="12" font-family="system-ui, sans-serif" text-anchor="end" fill-opacity="0.85" font-weight="400">
+              <text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" class="text" font-size="12" font-family="system-ui, sans-serif" text-anchor="left" fill-opacity="0.85" font-weight="400">
                 Modeling Methods
               </text>
             </g>
           </g>
         </g>
-        <g fill="none" x="8" y="-212.5" transform="matrix(1,0,0,1,8,-212.500000)">
+        <g fill="none" x="308.00000762939453" y="52.00000762939453" transform="matrix(1,0,0,1,308,52.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -237,7 +237,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="-338.5" transform="matrix(1,0,0,1,124,-338.500000)">
+        <g fill="none" x="424.00000762939453" y="-73.99999237060547" transform="matrix(1,0,0,1,424,-73.999992)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -249,7 +249,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="-302.5" transform="matrix(1,0,0,1,124,-302.500000)">
+        <g fill="none" x="424.00000762939453" y="-37.99999237060547" transform="matrix(1,0,0,1,424,-37.999992)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -261,7 +261,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="-266.5" transform="matrix(1,0,0,1,124,-266.500000)">
+        <g fill="none" x="424.00000762939453" y="-1.9999923706054688" transform="matrix(1,0,0,1,424,-1.999992)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -273,7 +273,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="-230.5" transform="matrix(1,0,0,1,124,-230.500000)">
+        <g fill="none" x="424.00000762939453" y="34.00000762939453" transform="matrix(1,0,0,1,424,34.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -285,7 +285,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="-194.5" transform="matrix(1,0,0,1,124,-194.500000)">
+        <g fill="none" x="424.00000762939453" y="70.00000762939453" transform="matrix(1,0,0,1,424,70.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -297,7 +297,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="-158.5" transform="matrix(1,0,0,1,124,-158.500000)">
+        <g fill="none" x="424.00000762939453" y="106.00000762939453" transform="matrix(1,0,0,1,424,106.000008)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -309,7 +309,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="-122.5" transform="matrix(1,0,0,1,124,-122.500000)">
+        <g fill="none" x="424.00000762939453" y="142.00000762939453" transform="matrix(1,0,0,1,424,142)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -321,7 +321,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="-86.5" transform="matrix(1,0,0,1,124,-86.500000)">
+        <g fill="none" x="424.00000762939453" y="178.00000762939453" transform="matrix(1,0,0,1,424,178)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -333,7 +333,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="8" y="156.5" transform="matrix(1,0,0,1,8,156.500000)">
+        <g fill="none" x="308.00000762939453" y="421.00000762939453" transform="matrix(1,0,0,1,308,421)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -345,7 +345,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="39.5" transform="matrix(1,0,0,1,124,39.500000)">
+        <g fill="none" x="424.00000762939453" y="304.00000762939453" transform="matrix(1,0,0,1,424,304)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -357,7 +357,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="-50.5" transform="matrix(1,0,0,1,240,-50.500000)">
+        <g fill="none" x="540.0000076293945" y="214.00000762939453" transform="matrix(1,0,0,1,540,214)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -369,7 +369,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="-14.5" transform="matrix(1,0,0,1,240,-14.500000)">
+        <g fill="none" x="540.0000076293945" y="250.00000762939453" transform="matrix(1,0,0,1,540,250)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -381,7 +381,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="21.5" transform="matrix(1,0,0,1,240,21.500000)">
+        <g fill="none" x="540.0000076293945" y="286.00000762939453" transform="matrix(1,0,0,1,540,286)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -393,7 +393,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="57.5" transform="matrix(1,0,0,1,240,57.500000)">
+        <g fill="none" x="540.0000076293945" y="322.00000762939453" transform="matrix(1,0,0,1,540,322)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -405,7 +405,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="93.5" transform="matrix(1,0,0,1,240,93.500000)">
+        <g fill="none" x="540.0000076293945" y="358.00000762939453" transform="matrix(1,0,0,1,540,358)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -417,7 +417,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="129.5" transform="matrix(1,0,0,1,240,129.500000)">
+        <g fill="none" x="540.0000076293945" y="394.00000762939453" transform="matrix(1,0,0,1,540,394)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -429,7 +429,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="183.5" transform="matrix(1,0,0,1,124,183.500000)">
+        <g fill="none" x="424.00000762939453" y="448.00000762939453" transform="matrix(1,0,0,1,424,448)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -441,7 +441,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="165.5" transform="matrix(1,0,0,1,240,165.500000)">
+        <g fill="none" x="540.0000076293945" y="430.00000762939453" transform="matrix(1,0,0,1,540,430)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -453,7 +453,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="201.5" transform="matrix(1,0,0,1,240,201.500000)">
+        <g fill="none" x="540.0000076293945" y="466.00000762939453" transform="matrix(1,0,0,1,540,466)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -465,7 +465,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="124" y="273.5" transform="matrix(1,0,0,1,124,273.500000)">
+        <g fill="none" x="424.00000762939453" y="538.0000076293945" transform="matrix(1,0,0,1,424,538)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -477,7 +477,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="237.5" transform="matrix(1,0,0,1,240,237.500000)">
+        <g fill="none" x="540.0000076293945" y="502.00000762939453" transform="matrix(1,0,0,1,540,502)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -489,7 +489,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="273.5" transform="matrix(1,0,0,1,240,273.500000)">
+        <g fill="none" x="540.0000076293945" y="538.0000076293945" transform="matrix(1,0,0,1,540,538)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -501,7 +501,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="240" y="309.5" transform="matrix(1,0,0,1,240,309.500000)">
+        <g fill="none" x="540.0000076293945" y="574.0000076293945" transform="matrix(1,0,0,1,540,574)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -513,19 +513,19 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-224" y="-28" transform="matrix(1,0,0,1,-224,-28)">
+        <g fill="none" x="76.00000762939453" y="236.50000762939453" transform="matrix(1,0,0,1,76.000008,236.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
-          <g fill="none" class="label" transform="matrix(1,0,0,1,-13,2)">
+          <g fill="none" class="label" transform="matrix(1,0,0,1,13,2)">
             <g>
-              <text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" class="text" font-size="12" font-family="system-ui, sans-serif" text-anchor="end" fill-opacity="0.85" font-weight="400">
+              <text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" class="text" font-size="12" font-family="system-ui, sans-serif" text-anchor="left" fill-opacity="0.85" font-weight="400">
                 Regression
               </text>
             </g>
           </g>
         </g>
-        <g fill="none" x="-340" y="-100" transform="matrix(1,0,0,1,-340,-100)">
+        <g fill="none" x="-39.99999237060547" y="164.50000762939453" transform="matrix(1,0,0,1,-39.999992,164.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -537,7 +537,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-340" y="-64" transform="matrix(1,0,0,1,-340,-64)">
+        <g fill="none" x="-39.99999237060547" y="200.50000762939453" transform="matrix(1,0,0,1,-39.999992,200.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -549,7 +549,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-340" y="-28" transform="matrix(1,0,0,1,-340,-28)">
+        <g fill="none" x="-39.99999237060547" y="236.50000762939453" transform="matrix(1,0,0,1,-39.999992,236.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -561,7 +561,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-340" y="8" transform="matrix(1,0,0,1,-340,8)">
+        <g fill="none" x="-39.99999237060547" y="272.50000762939453" transform="matrix(1,0,0,1,-39.999992,272.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
@@ -573,7 +573,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="-340" y="44" transform="matrix(1,0,0,1,-340,44)">
+        <g fill="none" x="-39.99999237060547" y="308.50000762939453" transform="matrix(1,0,0,1,-39.999992,308.500000)">
           <g>
             <circle fill="rgba(239,244,255,1)" class="key" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
           </g>
diff --git a/packages/g6/__tests__/snapshots/runtime/graph/add-children-data/add-children-data.svg b/packages/g6/__tests__/snapshots/runtime/graph/add-children-data/add-children-data.svg
index 8231dbecf6c..711d59544e8 100644
--- a/packages/g6/__tests__/snapshots/runtime/graph/add-children-data/add-children-data.svg
+++ b/packages/g6/__tests__/snapshots/runtime/graph/add-children-data/add-children-data.svg
@@ -1,233 +1,233 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
   <defs/>
-  <g transform="matrix(0.478011,0,0,0.478011,147.915863,285.850861)">
+  <g transform="matrix(0.478011,0,0,0.478011,52.523907,130.497101)">
     <g fill="none">
       <g fill="none">
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -200,-36 C -100 -36,-100 -400,0 -400" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -0.4399871826171875,289.00006103515625 C 99.56001281738281 289.00006103515625,99.56001281738281 -74.99995422363281,199.5600128173828 -74.99995422363281" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -200,-36 C -100 -36,-100 3,0 3" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -0.4399871826171875,289.00006103515625 C 99.56001281738281 289.00006103515625,99.56001281738281 328.00006103515625,199.5600128173828 328.00006103515625" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -200,-36 C -100 -36,-100 328,0 328" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -0.4399871826171875,289.00006103515625 C 99.56001281738281 289.00006103515625,99.56001281738281 653.0000610351562,199.5600128173828 653.0000610351562" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -582,232 -582" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 231.5600128173828,-74.99995422363281 C 331.5600051879883 -74.99995422363281,331.5600051879883 -256.99993896484375,431.55999755859375 -256.99993896484375" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -530,232 -530" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 231.5600128173828,-74.99995422363281 C 331.5600051879883 -74.99995422363281,331.5600051879883 -204.9999542236328,431.55999755859375 -204.9999542236328" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -478,232 -478" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 231.5600128173828,-74.99995422363281 C 331.5600051879883 -74.99995422363281,331.5600051879883 -152.9999542236328,431.55999755859375 -152.9999542236328" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -426,232 -426" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 231.5600128173828,-74.99995422363281 C 331.5600051879883 -74.99995422363281,331.5600051879883 -100.99995422363281,431.55999755859375 -100.99995422363281" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -374,232 -374" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 231.5600128173828,-74.99995422363281 C 331.5600051879883 -74.99995422363281,331.5600051879883 -48.99995422363281,431.55999755859375 -48.99995422363281" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -322,232 -322" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 231.5600128173828,-74.99995422363281 C 331.5600051879883 -74.99995422363281,331.5600051879883 3.0000457763671875,431.55999755859375 3.0000457763671875" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -270,232 -270" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 231.5600128173828,-74.99995422363281 C 331.5600051879883 -74.99995422363281,331.5600051879883 55.00004577636719,431.55999755859375 55.00004577636719" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -218,232 -218" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 231.5600128173828,-74.99995422363281 C 331.5600051879883 -74.99995422363281,331.5600051879883 107.00004577636719,431.55999755859375 107.00004577636719" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,3 C 132 3,132 -166,232 -166" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 231.5600128173828,328.00006103515625 C 331.5600051879883 328.00006103515625,331.5600051879883 159.0000457763672,431.55999755859375 159.0000457763672" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,3 C 132 3,132 42,232 42" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 231.5600128173828,328.00006103515625 C 331.5600051879883 328.00006103515625,331.5600051879883 367.00006103515625,431.55999755859375 367.00006103515625" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,3 C 132 3,132 172,232 172" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 231.5600128173828,328.00006103515625 C 331.5600051879883 328.00006103515625,331.5600051879883 497.00006103515625,431.55999755859375 497.00006103515625" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -296,464 -296" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 463.55999755859375,159.0000457763672 C 563.5599975585938 159.0000457763672,563.5599975585938 29.000045776367188,663.5599975585938 29.000045776367188" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -244,464 -244" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 463.55999755859375,159.0000457763672 C 563.5599975585938 159.0000457763672,563.5599975585938 81.00004577636719,663.5599975585938 81.00004577636719" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -192,464 -192" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 463.55999755859375,159.0000457763672 C 563.5599975585938 159.0000457763672,563.5599975585938 133.0000457763672,663.5599975585938 133.0000457763672" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -140,464 -140" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 463.55999755859375,159.0000457763672 C 563.5599975585938 159.0000457763672,563.5599975585938 185.0000457763672,663.5599975585938 185.0000457763672" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -88,464 -88" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 463.55999755859375,159.0000457763672 C 563.5599975585938 159.0000457763672,563.5599975585938 237.0000457763672,663.5599975585938 237.0000457763672" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -36,464 -36" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 463.55999755859375,159.0000457763672 C 563.5599975585938 159.0000457763672,563.5599975585938 289.00006103515625,663.5599975585938 289.00006103515625" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,42 C 364 42,364 16,464 16" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 463.55999755859375,367.00006103515625 C 563.5599975585938 367.00006103515625,563.5599975585938 341.00006103515625,663.5599975585938 341.00006103515625" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,42 C 364 42,364 68,464 68" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 463.55999755859375,367.00006103515625 C 563.5599975585938 367.00006103515625,563.5599975585938 393.00006103515625,663.5599975585938 393.00006103515625" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,172 C 364 172,364 120,464 120" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 463.55999755859375,497.00006103515625 C 563.5599975585938 497.00006103515625,563.5599975585938 445.00006103515625,663.5599975585938 445.00006103515625" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,172 C 364 172,364 172,464 172" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 463.55999755859375,497.00006103515625 C 563.5599975585938 497.00006103515625,563.5599975585938 497.00006103515625,663.5599975585938 497.00006103515625" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,172 C 364 172,364 224,464 224" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 463.55999755859375,497.00006103515625 C 563.5599975585938 497.00006103515625,563.5599975585938 549.0000610351562,663.5599975585938 549.0000610351562" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,328 C 132 328,132 224,232 224" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 231.5600128173828,653.0000610351562 C 331.5600051879883 653.0000610351562,331.5600051879883 549.0000610351562,431.55999755859375 549.0000610351562" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,328 C 132 328,132 276,232 276" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 231.5600128173828,653.0000610351562 C 331.5600051879883 653.0000610351562,331.5600051879883 601.0000610351562,431.55999755859375 601.0000610351562" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,328 C 132 328,132 328,232 328" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 231.5600128173828,653.0000610351562 C 331.5600051879883 653.0000610351562,331.5600051879883 653.0000610351562,431.55999755859375 653.0000610351562" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,328 C 132 328,132 380,232 380" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 231.5600128173828,653.0000610351562 C 331.5600051879883 653.0000610351562,331.5600051879883 705.0000610351562,431.55999755859375 705.0000610351562" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,328 C 132 328,132 432,232 432" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 231.5600128173828,653.0000610351562 C 331.5600051879883 653.0000610351562,331.5600051879883 757.0000610351562,431.55999755859375 757.0000610351562" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-478 C 364 -478,364 -504,464 -504" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
-            <path fill="none" d="M 232,-478 C 124 -478,124 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
+            <path fill="none" d="M 463.55999755859375,-152.9999542236328 C 563.5599975585938 -152.9999542236328,563.5599975585938 -178.9999542236328,663.5599975585938 -178.9999542236328" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 350,-153 C 183 -153,183 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-478 C 364 -478,364 -452,464 -452" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
-            <path fill="none" d="M 232,-478 C 124 -478,124 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
+            <path fill="none" d="M 463.55999755859375,-152.9999542236328 C 563.5599975585938 -152.9999542236328,563.5599975585938 -126.99995422363281,663.5599975585938 -126.99995422363281" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 350,-153 C 183 -153,183 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
-        <g fill="none" x="-216" y="-36" transform="matrix(1,0,0,1,-216,-36)">
+        <g fill="none" x="-16.439987182617188" y="289.0000457763672" transform="matrix(1,0,0,1,-16.439987,289.000061)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -239,7 +239,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="16" y="-400" transform="matrix(1,0,0,1,16,-400)">
+        <g fill="none" x="215.5600128173828" y="-74.99995422363281" transform="matrix(1,0,0,1,215.560013,-74.999954)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -251,7 +251,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-582" transform="matrix(1,0,0,1,248,-582)">
+        <g fill="none" x="447.5600128173828" y="-256.9999542236328" transform="matrix(1,0,0,1,447.559998,-256.999939)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -263,7 +263,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-530" transform="matrix(1,0,0,1,248,-530)">
+        <g fill="none" x="447.5600128173828" y="-204.9999542236328" transform="matrix(1,0,0,1,447.559998,-204.999954)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -275,7 +275,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-478" transform="matrix(1,0,0,1,248,-478)">
+        <g fill="none" x="447.5600128173828" y="-152.9999542236328" transform="matrix(1,0,0,1,447.559998,-152.999954)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -287,7 +287,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-426" transform="matrix(1,0,0,1,248,-426)">
+        <g fill="none" x="447.5600128173828" y="-100.99995422363281" transform="matrix(1,0,0,1,447.559998,-100.999954)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -299,7 +299,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-374" transform="matrix(1,0,0,1,248,-374)">
+        <g fill="none" x="447.5600128173828" y="-48.99995422363281" transform="matrix(1,0,0,1,447.559998,-48.999954)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -311,7 +311,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-322" transform="matrix(1,0,0,1,248,-322)">
+        <g fill="none" x="447.5600128173828" y="3.0000457763671875" transform="matrix(1,0,0,1,447.559998,3.000046)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -323,7 +323,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-270" transform="matrix(1,0,0,1,248,-270)">
+        <g fill="none" x="447.5600128173828" y="55.00004577636719" transform="matrix(1,0,0,1,447.559998,55.000046)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -335,7 +335,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-218" transform="matrix(1,0,0,1,248,-218)">
+        <g fill="none" x="447.5600128173828" y="107.00004577636719" transform="matrix(1,0,0,1,447.559998,107.000046)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -347,7 +347,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="16" y="3" transform="matrix(1,0,0,1,16,3)">
+        <g fill="none" x="215.5600128173828" y="328.0000457763672" transform="matrix(1,0,0,1,215.560013,328.000061)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -359,7 +359,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-166" transform="matrix(1,0,0,1,248,-166)">
+        <g fill="none" x="447.5600128173828" y="159.0000457763672" transform="matrix(1,0,0,1,447.559998,159.000046)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -371,7 +371,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-296" transform="matrix(1,0,0,1,480,-296)">
+        <g fill="none" x="679.5600128173828" y="29.000045776367188" transform="matrix(1,0,0,1,679.559998,29.000046)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -383,7 +383,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-244" transform="matrix(1,0,0,1,480,-244)">
+        <g fill="none" x="679.5600128173828" y="81.00004577636719" transform="matrix(1,0,0,1,679.559998,81.000046)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -395,7 +395,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-192" transform="matrix(1,0,0,1,480,-192)">
+        <g fill="none" x="679.5600128173828" y="133.0000457763672" transform="matrix(1,0,0,1,679.559998,133.000046)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -407,7 +407,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-140" transform="matrix(1,0,0,1,480,-140)">
+        <g fill="none" x="679.5600128173828" y="185.0000457763672" transform="matrix(1,0,0,1,679.559998,185.000046)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -419,7 +419,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-88" transform="matrix(1,0,0,1,480,-88)">
+        <g fill="none" x="679.5600128173828" y="237.0000457763672" transform="matrix(1,0,0,1,679.559998,237.000046)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -431,7 +431,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-36" transform="matrix(1,0,0,1,480,-36)">
+        <g fill="none" x="679.5600128173828" y="289.0000457763672" transform="matrix(1,0,0,1,679.559998,289.000061)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -443,7 +443,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="42" transform="matrix(1,0,0,1,248,42)">
+        <g fill="none" x="447.5600128173828" y="367.0000457763672" transform="matrix(1,0,0,1,447.559998,367.000061)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -455,7 +455,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="16" transform="matrix(1,0,0,1,480,16)">
+        <g fill="none" x="679.5600128173828" y="341.0000457763672" transform="matrix(1,0,0,1,679.559998,341.000061)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -467,7 +467,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="68" transform="matrix(1,0,0,1,480,68)">
+        <g fill="none" x="679.5600128173828" y="393.0000457763672" transform="matrix(1,0,0,1,679.559998,393.000061)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -479,7 +479,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="172" transform="matrix(1,0,0,1,248,172)">
+        <g fill="none" x="447.5600128173828" y="497.0000457763672" transform="matrix(1,0,0,1,447.559998,497.000061)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -491,7 +491,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="120" transform="matrix(1,0,0,1,480,120)">
+        <g fill="none" x="679.5600128173828" y="445.0000457763672" transform="matrix(1,0,0,1,679.559998,445.000061)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -503,7 +503,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="172" transform="matrix(1,0,0,1,480,172)">
+        <g fill="none" x="679.5600128173828" y="497.0000457763672" transform="matrix(1,0,0,1,679.559998,497.000061)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -515,7 +515,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="224" transform="matrix(1,0,0,1,480,224)">
+        <g fill="none" x="679.5600128173828" y="549.0000457763672" transform="matrix(1,0,0,1,679.559998,549.000061)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -527,7 +527,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="16" y="328" transform="matrix(1,0,0,1,16,328)">
+        <g fill="none" x="215.5600128173828" y="653.0000457763672" transform="matrix(1,0,0,1,215.560013,653.000061)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -539,7 +539,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="224" transform="matrix(1,0,0,1,248,224)">
+        <g fill="none" x="447.5600128173828" y="549.0000457763672" transform="matrix(1,0,0,1,447.559998,549.000061)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -551,7 +551,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="276" transform="matrix(1,0,0,1,248,276)">
+        <g fill="none" x="447.5600128173828" y="601.0000457763672" transform="matrix(1,0,0,1,447.559998,601.000061)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -563,7 +563,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="328" transform="matrix(1,0,0,1,248,328)">
+        <g fill="none" x="447.5600128173828" y="653.0000457763672" transform="matrix(1,0,0,1,447.559998,653.000061)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -575,7 +575,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="380" transform="matrix(1,0,0,1,248,380)">
+        <g fill="none" x="447.5600128173828" y="705.0000457763672" transform="matrix(1,0,0,1,447.559998,705.000061)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -587,7 +587,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="432" transform="matrix(1,0,0,1,248,432)">
+        <g fill="none" x="447.5600128173828" y="757.0000457763672" transform="matrix(1,0,0,1,447.559998,757.000061)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -599,7 +599,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-504" transform="matrix(1,0,0,1,480,-504)">
+        <g fill="none" x="679.5600128173828" y="-178.9999542236328" transform="matrix(1,0,0,1,679.559998,-178.999954)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -611,7 +611,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-452" transform="matrix(1,0,0,1,480,-452)">
+        <g fill="none" x="679.5600128173828" y="-126.99995422363281" transform="matrix(1,0,0,1,679.559998,-126.999954)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
diff --git a/packages/g6/__tests__/snapshots/runtime/graph/add-children-data/default.svg b/packages/g6/__tests__/snapshots/runtime/graph/add-children-data/default.svg
index 487ca46600d..b5708e0a86a 100644
--- a/packages/g6/__tests__/snapshots/runtime/graph/add-children-data/default.svg
+++ b/packages/g6/__tests__/snapshots/runtime/graph/add-children-data/default.svg
@@ -1,219 +1,219 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
   <defs/>
-  <g transform="matrix(0.478011,0,0,0.478011,147.915878,285.850861)">
+  <g transform="matrix(0.478011,0,0,0.478011,91.510513,130.497131)">
     <g fill="none">
       <g fill="none">
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -200,-36 C -100 -36,-100 -400,0 -400" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -81.99999237060547,289 C 18.000003814697266 289,18.000003814697266 -74.99999237060547,118 -74.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -200,-36 C -100 -36,-100 3,0 3" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -81.99999237060547,289 C 18.000003814697266 289,18.000003814697266 328,118 328" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M -200,-36 C -100 -36,-100 328,0 328" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M -81.99999237060547,289 C 18.000003814697266 289,18.000003814697266 653,118 653" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -582,232 -582" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,-74.99999237060547 C 250 -74.99999237060547,250 -257,350 -257" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -530,232 -530" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,-74.99999237060547 C 250 -74.99999237060547,250 -205,350 -205" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -478,232 -478" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,-74.99999237060547 C 250 -74.99999237060547,250 -153,350 -153" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -426,232 -426" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,-74.99999237060547 C 250 -74.99999237060547,250 -100.99999237060547,350 -100.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -374,232 -374" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,-74.99999237060547 C 250 -74.99999237060547,250 -48.99999237060547,350 -48.99999237060547" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -322,232 -322" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,-74.99999237060547 C 250 -74.99999237060547,250 3.0000076293945312,350 3.0000076293945312" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -270,232 -270" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,-74.99999237060547 C 250 -74.99999237060547,250 55.00000762939453,350 55.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,-400 C 132 -400,132 -218,232 -218" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,-74.99999237060547 C 250 -74.99999237060547,250 107.00000762939453,350 107.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,3 C 132 3,132 -166,232 -166" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,328 C 250 328,250 159,350 159" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,3 C 132 3,132 42,232 42" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,328 C 250 328,250 367,350 367" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,3 C 132 3,132 172,232 172" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,328 C 250 328,250 497,350 497" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -296,464 -296" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,159 C 482 159,482 29.00000762939453,582 29.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -244,464 -244" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,159 C 482 159,482 81.00000762939453,582 81.00000762939453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -192,464 -192" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,159 C 482 159,482 133,582 133" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -140,464 -140" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,159 C 482 159,482 185,582 185" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -88,464 -88" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,159 C 482 159,482 237,582 237" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,-166 C 364 -166,364 -36,464 -36" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,159 C 482 159,482 289,582 289" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,42 C 364 42,364 16,464 16" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,367 C 482 367,482 341,582 341" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,42 C 364 42,364 68,464 68" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,367 C 482 367,482 393,582 393" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,172 C 364 172,364 120,464 120" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,497 C 482 497,482 445,582 445" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,172 C 364 172,364 172,464 172" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,497 C 482 497,482 497,582 497" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 264,172 C 364 172,364 224,464 224" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 382,497 C 482 497,482 549,582 549" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,328 C 132 328,132 224,232 224" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,653 C 250 653,250 549,350 549" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,328 C 132 328,132 276,232 276" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,653 C 250 653,250 601,350 601" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,328 C 132 328,132 328,232 328" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,653 C 250 653,250 653,350 653" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,328 C 132 328,132 380,232 380" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,653 C 250 653,250 705,350 705" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
         <g fill="none" marker-start="false" marker-end="false">
           <g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
           <g>
-            <path fill="none" d="M 32,328 C 132 328,132 432,232 432" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 150,653 C 250 653,250 757,350 757" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
             <path fill="none" d="M 16,0 C 16 0,16 0,16 0" class="key" stroke-width="3" stroke="transparent"/>
           </g>
         </g>
-        <g fill="none" x="-216" y="-36" transform="matrix(1,0,0,1,-216,-36)">
+        <g fill="none" x="-97.99999237060547" y="289.00000762939453" transform="matrix(1,0,0,1,-97.999992,289)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -225,7 +225,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="16" y="-400" transform="matrix(1,0,0,1,16,-400)">
+        <g fill="none" x="134.00000762939453" y="-74.99999237060547" transform="matrix(1,0,0,1,134,-74.999992)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -237,7 +237,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-582" transform="matrix(1,0,0,1,248,-582)">
+        <g fill="none" x="366.00000762939453" y="-256.99999237060547" transform="matrix(1,0,0,1,366,-257)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -249,7 +249,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-530" transform="matrix(1,0,0,1,248,-530)">
+        <g fill="none" x="366.00000762939453" y="-204.99999237060547" transform="matrix(1,0,0,1,366,-205)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -261,7 +261,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-478" transform="matrix(1,0,0,1,248,-478)">
+        <g fill="none" x="366.00000762939453" y="-152.99999237060547" transform="matrix(1,0,0,1,366,-153)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -273,7 +273,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-426" transform="matrix(1,0,0,1,248,-426)">
+        <g fill="none" x="366.00000762939453" y="-100.99999237060547" transform="matrix(1,0,0,1,366,-100.999992)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -285,7 +285,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-374" transform="matrix(1,0,0,1,248,-374)">
+        <g fill="none" x="366.00000762939453" y="-48.99999237060547" transform="matrix(1,0,0,1,366,-48.999992)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -297,7 +297,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-322" transform="matrix(1,0,0,1,248,-322)">
+        <g fill="none" x="366.00000762939453" y="3.0000076293945312" transform="matrix(1,0,0,1,366,3.000008)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -309,7 +309,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-270" transform="matrix(1,0,0,1,248,-270)">
+        <g fill="none" x="366.00000762939453" y="55.00000762939453" transform="matrix(1,0,0,1,366,55.000008)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -321,7 +321,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-218" transform="matrix(1,0,0,1,248,-218)">
+        <g fill="none" x="366.00000762939453" y="107.00000762939453" transform="matrix(1,0,0,1,366,107.000008)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -333,7 +333,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="16" y="3" transform="matrix(1,0,0,1,16,3)">
+        <g fill="none" x="134.00000762939453" y="328.00000762939453" transform="matrix(1,0,0,1,134,328)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -345,7 +345,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="-166" transform="matrix(1,0,0,1,248,-166)">
+        <g fill="none" x="366.00000762939453" y="159.00000762939453" transform="matrix(1,0,0,1,366,159)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -357,7 +357,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-296" transform="matrix(1,0,0,1,480,-296)">
+        <g fill="none" x="598.0000076293945" y="29.00000762939453" transform="matrix(1,0,0,1,598,29.000008)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -369,7 +369,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-244" transform="matrix(1,0,0,1,480,-244)">
+        <g fill="none" x="598.0000076293945" y="81.00000762939453" transform="matrix(1,0,0,1,598,81.000008)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -381,7 +381,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-192" transform="matrix(1,0,0,1,480,-192)">
+        <g fill="none" x="598.0000076293945" y="133.00000762939453" transform="matrix(1,0,0,1,598,133)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -393,7 +393,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-140" transform="matrix(1,0,0,1,480,-140)">
+        <g fill="none" x="598.0000076293945" y="185.00000762939453" transform="matrix(1,0,0,1,598,185)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -405,7 +405,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-88" transform="matrix(1,0,0,1,480,-88)">
+        <g fill="none" x="598.0000076293945" y="237.00000762939453" transform="matrix(1,0,0,1,598,237)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -417,7 +417,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="-36" transform="matrix(1,0,0,1,480,-36)">
+        <g fill="none" x="598.0000076293945" y="289.00000762939453" transform="matrix(1,0,0,1,598,289)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -429,7 +429,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="42" transform="matrix(1,0,0,1,248,42)">
+        <g fill="none" x="366.00000762939453" y="367.00000762939453" transform="matrix(1,0,0,1,366,367)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -441,7 +441,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="16" transform="matrix(1,0,0,1,480,16)">
+        <g fill="none" x="598.0000076293945" y="341.00000762939453" transform="matrix(1,0,0,1,598,341)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -453,7 +453,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="68" transform="matrix(1,0,0,1,480,68)">
+        <g fill="none" x="598.0000076293945" y="393.00000762939453" transform="matrix(1,0,0,1,598,393)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -465,7 +465,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="172" transform="matrix(1,0,0,1,248,172)">
+        <g fill="none" x="366.00000762939453" y="497.00000762939453" transform="matrix(1,0,0,1,366,497)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -477,7 +477,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="120" transform="matrix(1,0,0,1,480,120)">
+        <g fill="none" x="598.0000076293945" y="445.00000762939453" transform="matrix(1,0,0,1,598,445)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -489,7 +489,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="172" transform="matrix(1,0,0,1,480,172)">
+        <g fill="none" x="598.0000076293945" y="497.00000762939453" transform="matrix(1,0,0,1,598,497)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -501,7 +501,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="480" y="224" transform="matrix(1,0,0,1,480,224)">
+        <g fill="none" x="598.0000076293945" y="549.0000076293945" transform="matrix(1,0,0,1,598,549)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -513,7 +513,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="16" y="328" transform="matrix(1,0,0,1,16,328)">
+        <g fill="none" x="134.00000762939453" y="653.0000076293945" transform="matrix(1,0,0,1,134,653)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -525,7 +525,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="224" transform="matrix(1,0,0,1,248,224)">
+        <g fill="none" x="366.00000762939453" y="549.0000076293945" transform="matrix(1,0,0,1,366,549)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -537,7 +537,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="276" transform="matrix(1,0,0,1,248,276)">
+        <g fill="none" x="366.00000762939453" y="601.0000076293945" transform="matrix(1,0,0,1,366,601)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -549,7 +549,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="328" transform="matrix(1,0,0,1,248,328)">
+        <g fill="none" x="366.00000762939453" y="653.0000076293945" transform="matrix(1,0,0,1,366,653)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -561,7 +561,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="380" transform="matrix(1,0,0,1,248,380)">
+        <g fill="none" x="366.00000762939453" y="705.0000076293945" transform="matrix(1,0,0,1,366,705)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
@@ -573,7 +573,7 @@
             </g>
           </g>
         </g>
-        <g fill="none" x="248" y="432" transform="matrix(1,0,0,1,248,432)">
+        <g fill="none" x="366.00000762939453" y="757.0000076293945" transform="matrix(1,0,0,1,366,757)">
           <g>
             <circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
           </g>
diff --git a/packages/g6/src/runtime/layout.ts b/packages/g6/src/runtime/layout.ts
index 5d084a6620a..26f9fdb4d2f 100644
--- a/packages/g6/src/runtime/layout.ts
+++ b/packages/g6/src/runtime/layout.ts
@@ -156,6 +156,7 @@ export class LayoutController {
 
     createTreeStructure(model);
 
+    const layoutPreset: GraphData = { nodes: [], edges: [] };
     const layoutResult: GraphData = { nodes: [], edges: [] };
 
     const roots = model.getRoots(TREE_KEY) as unknown as TreeData[];
@@ -170,11 +171,13 @@ export class LayoutController {
       );
 
       const result = layout(root, options);
+      const { x: rx, y: ry, z: rz = 0 } = result;
       // 将布局结果转化为 LayoutMapping 格式 / Convert the layout result to LayoutMapping format
       dfs(
         result,
         (node) => {
           const { id, x, y, z = 0 } = node;
+          layoutPreset.nodes!.push({ id, style: { x: rx, y: ry, z: rz } });
           layoutResult.nodes!.push({ id, style: { x, y, z } });
         },
         (node) => node.children,
@@ -182,13 +185,45 @@ export class LayoutController {
       );
     });
 
+    const offset = this.inferTreeLayoutOffset(layoutResult);
+    applyTreeLayoutOffset(layoutResult, offset);
+
     if (animation) {
+      // 先将所有节点移动到根节点位置 / Move all nodes to the root node position first
+      applyTreeLayoutOffset(layoutPreset, offset);
+      this.updateElementPosition(layoutPreset, false);
+
       this.updateElementPosition(layoutResult, animation);
     }
 
     return layoutResult;
   }
 
+  private inferTreeLayoutOffset(data: GraphData) {
+    let [minX, maxX] = [Infinity, -Infinity];
+    let [minY, maxY] = [Infinity, -Infinity];
+
+    data.nodes?.forEach((node) => {
+      const { x = 0, y = 0 } = node.style || {};
+      minX = Math.min(minX, x);
+      maxX = Math.max(maxX, x);
+      minY = Math.min(minY, y);
+      maxY = Math.max(maxY, y);
+    });
+
+    const { canvas } = this.context;
+    const canvasSize = canvas.getSize();
+    const [x1, y1] = canvas.getCanvasByViewport([0, 0]);
+    const [x2, y2] = canvas.getCanvasByViewport(canvasSize);
+
+    if (minX >= x1 && maxX <= x2 && minY >= y1 && maxY <= y2) return [0, 0] as [number, number];
+
+    const cx = (x1 + x2) / 2;
+    const cy = (y1 + y2) / 2;
+
+    return [cx - (minX + maxX) / 2, cy - (minY + maxY) / 2] as [number, number];
+  }
+
   public stopLayout() {
     if (this.instance && isLayoutWithIterations(this.instance)) {
       this.instance.stop();
@@ -303,3 +338,23 @@ export class LayoutController {
     this.animationResult = undefined;
   }
 }
+
+/**
+ * <zh/> 对树形布局结果应用偏移
+ *
+ * <en/> Apply offset to tree layout result
+ * @param data - <zh/> 布局数据 | <en/> Layout data
+ * @param offset - <zh/> 偏移量 | <en/> Offset
+ */
+const applyTreeLayoutOffset = (data: GraphData, offset: [number, number]) => {
+  const [ox, oy] = offset;
+  data.nodes?.forEach((node) => {
+    if (node.style) {
+      const { x = 0, y = 0 } = node.style;
+      node.style.x = x + ox;
+      node.style.y = y + oy;
+    } else {
+      node.style = { x: ox, y: oy };
+    }
+  });
+};