调整连线锚点位置

src/view/Manage/Map/Component/Relation.jsx

 import React from 'react';
 import G6 from '@antv/g6';
-
+import { isNumber } from '@antv/util';
 // import { ContextPath } from '../../../../util';
 
 const colors = [
@@ -57,22 +57,22 @@ class Relation extends React.Component {
     G6.registerNode(
       'relation-node',
       {
-        draw(cfg, group) { 
+        draw(cfg, group) {
 
-          let [x,y] = [0,0]
+          let [x, y] = [0, 0]
 
           if (cfg.depth === 0) {
             root = cfg
             radius = cfg.children?.length > 10
           } else {
-            [x,y] = textXY(root, cfg)
+            [x, y] = textXY(root, cfg)
           }
 
-          group.addShape('circle', {
+          const circle = group.addShape('circle', {
             attrs: {
               x: 0,
               y: 0,
-              r: (radius && cfg.depth !== 0) ? 10 : cfg.size/4,
+              r: (radius && cfg.depth !== 0) ? 10 : cfg.size / 4,
               fill: colors[cfg.depth % colors.length],
             },
           });
@@ -88,7 +88,7 @@ class Relation extends React.Component {
               text: (cfg.label || ''),
             }
           });
-          
+
           const bbox = text.getBBox();
 
           if (cfg.dbType === 'Root' || cfg.dbType === 'Dir') {
@@ -115,6 +115,31 @@ class Relation extends React.Component {
                 }
               });
             }
+            cfg.anchorPoints = [[0.5, 0.5]]
+          } else {
+            cfg.anchorPoints = [
+
+              [0, 0.5],//右边
+              [0, .7], 
+              [.1, .8], 
+              [.2, .8], 
+              [.3, .8],//顶部
+              [0, .3], 
+              [.1, .2], 
+              [.2, .2], 
+              [.3, .2],//底部
+               
+              [1, 0.5],//左边
+              [1, .7], 
+              [.9, .8], 
+              [.8, .8], 
+              [.7, .8],//顶部
+              [1, .3], 
+              [.9, .2], 
+              [.8, .2], 
+              [.7, .2],//底部
+
+            ]
           }
 
           return group;
@@ -144,11 +169,11 @@ class Relation extends React.Component {
     });
 
     graph = new G6.TreeGraph({
-      container: `container${type || ''}`,
+      container: `container${type || ''}`, animate: false,
       width,
       height,
       plugins: [tooltip],
-      linkCenter: true,
+      // linkCenter: true,
       maxZoom: 1,
       modes: {
         default: [
@@ -189,12 +214,13 @@ class Relation extends React.Component {
         ],
       },
       defaultEdge: {
-        type: 'cubic-horizontal',
+        // type: 'cubic-horizontal',
         size: 2,
         color: '#e2e2e2',
       },
     });
 
+
     const fittingString = (str, maxWidth, fontSize) => {
       const ellipsis = '...';
       const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
@@ -325,7 +351,7 @@ function textXY(root, cfg) {
   const { x, y } = cfg
   const _y = y - root.y, _x = x - root.x
   const rad = 10
-  const angle = Math.atan2( _y, _x)
+  const angle = Math.atan2(_y, _x)
   const sinAngle = Math.sin(angle), cosAngle = Math.cos(angle)
   // console.log(angle, sinAngle, cosAngle)
   const radX = rad
@@ -333,7 +359,7 @@ function textXY(root, cfg) {
   // console.log(angle, rad, txt) 
   return [
     // 右侧文字(中间向右侧15px,上下部向左靠20px) : 左侧
-    radX * cosAngle + (cosAngle > 0 ? txtWidth + 15 - Math.abs(sinAngle*20) : - (txtWidth + 15 -  Math.abs(sinAngle*20))), 
+    radX * cosAngle + (cosAngle > 0 ? txtWidth + 15 - Math.abs(sinAngle * 20) : - (txtWidth + 15 - Math.abs(sinAngle * 20))),
     radY * sinAngle
   ];
 }
\ No newline at end of file