add marker

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

 import React from 'react';
 import G6 from '@antv/g6';
-import { transform, mat3 } from '@antv/matrix-util';
 
 import circle from './circle.93e1.png'
 import node from './node-bg-select.171e.png'
@@ -65,7 +64,7 @@ function countDepth(node, _depth = 0) {
 function init(container, data) {
   depthCount = {}
   countDepth(data)
-  console.debug(depthCount)
+  // console.debug(depthCount)
   // const container = document.getElementById('container');
   const width = container.scrollWidth;
   const height = container.scrollHeight || 500;
@@ -177,8 +176,7 @@ G6.registerNode(
       }
 
       if (depthCount[cfg.depth] > 10) {
-
-        const image = group.addShape('image', {
+        group.addShape('image', {
           attrs: {
             x: -width1 / 2,
             y: -width1 / 2,
@@ -189,7 +187,6 @@ G6.registerNode(
           name: 'halo-shape',
           visible: false,
         });
-
       }
 
       if (depthCount[cfg.depth] > 10) {
@@ -305,10 +302,10 @@ G6.registerNode(
           focus && focus.hide();
         }
         // 将相关边也高亮
-        const relatedEdges = item.getEdges();
-        relatedEdges.forEach((edge) => {
-          edge.setState('focus', value);
-        });
+        // const relatedEdges = item.getEdges();
+        // relatedEdges.forEach((edge) => {
+        //   edge.setState('focus', value);
+        // });
       }
     },
     update: undefined,
@@ -324,11 +321,12 @@ G6.registerEdge(
       const startPoint = cfg.startPoint;
       const endPoint = cfg.endPoint;
 
-      const dx = endPoint.x - startPoint.x, dy = endPoint.y - startPoint.y, dst = Math.sqrt(dx*dx + dy*dy)
-      const px =dst > 30 ? 10 * dx / dst : 0, py = dst > 30 ? 10 * dy / dst : 0
-      const shape = group.addShape('path', {
+      const dx = endPoint.x - startPoint.x, dy = endPoint.y - startPoint.y, dst = Math.sqrt(dx * dx + dy * dy)
+      const px = dst > 30 ? 10 * dx / dst : 0, py = dst > 30 ? 10 * dy / dst : 0
+      const shape = group.addShape('path', { // 自定义连线
         attrs: {
           stroke: '#aaa',
+          lineWidth: .5,
           path: [
             ['M', startPoint.x + px, startPoint.y + py],
             ['L', endPoint.x - px, endPoint.y - py],
@@ -339,9 +337,10 @@ G6.registerEdge(
       });
 
       const midPoint = shape.getPoint(0.5);
-      const rad = Math.acos(dx/dst)
-      {
+      const rad = Math.acos(dx / dst)
+      const radius = dy < 0 ? -rad : rad
       const rw = 20, rh = 6
+      {
         const rect = group.addShape('rect', { // 文字的底框
           attrs: {
             width: rw,
@@ -354,7 +353,7 @@ G6.registerEdge(
         });
         const toMatrix = G6.Util.transform(
           [1, 0, 0, 0, 1, 0, 0, 0, 1],
-          [['t', -rw>>1, -rh>>1],['r', dy < 0 ? -rad : rad],['t',midPoint.x,midPoint.y]],
+          [['t', -rw >> 1, -rh >> 1], ['r', dy < 0 ? -rad : rad], ['t', midPoint.x, midPoint.y]],
         );
         rect.setMatrix(toMatrix)
       }
@@ -369,11 +368,26 @@ G6.registerEdge(
           }
         })
         const bbox = text.getBBox()
-        text.moveTo(midPoint.x, midPoint.y + (bbox.height>>1))
-        const radius = dy < 0 ? -rad : rad
-        text.rotateAtPoint(midPoint.x, midPoint.y, rad > Math.PI * .5 ? radius + Math.PI : radius )
+        text.moveTo(midPoint.x, midPoint.y + (bbox.height >> 1))
+        text.rotateAtPoint(midPoint.x, midPoint.y, rad > Math.PI * .5 ? radius + Math.PI : radius)
       }
 
+      {
+        const arrow = group.addShape('marker', {
+          attrs: {
+            x: 0,
+            y: 0,
+            r: 2,
+            fill: '#fff',
+            symbol: 'triangle',
+          },
+          // must be assigned in G6 3.3 and later versions. it can be any value you want
+          name: 'marker-shape',
+        });
+        const x = midPoint.x + ((rw >> 1) + 2.5) * dx / dst, y = midPoint.y + ((rw >> 1) + 2.5) * dy / dst
+        arrow.moveTo(x, y)
+        arrow.rotateAtPoint(x, y, radius + Math.PI * .5)
+      }
 
       return group;
     },