资产关系图

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

@@ -67,14 +67,12 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
     fixToNode: [1, 0.5],
     itemTypes: ['node'],
     getContent: (e) => {
-      const outDiv = document.createElement('div');
-      outDiv.style.width = 'fit-content';
-      outDiv.style.height = 'fit-content';
+
       const model = e.item.getModel();
       if (e.item.getType() === 'node') {
-        outDiv.innerHTML = `${model.text||''}`;
+        return model.text||'';
       }
-      return outDiv;
+      return '';
     },
   });
 
@@ -163,6 +161,17 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
             lineWidth: 5,
             cursor: 'pointer',
           })
+          .state({
+            active: {
+              style: (element) => {
+                const shape = element.shape;
+                return {
+                  lineWidth: 1,
+                  fillOpacity: shape.attr("fillOpacity")*0.4,
+                }
+              }
+            }
+          })
     
         view.interaction('element-active');
         view.legend(false);
@@ -201,6 +210,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
             width: imageWidth,
             cursor: 'pointer',
             img: expandImg,
+            alt: 'test'
           },
           name: 'expand-icon',
         });
@@ -336,8 +346,9 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
               circleShape3?.attr('fill', centerHighlightColorGroup[2]);
             } else {
               circleShape1?.attr('fill', nodeHighlightColor);
-              circleShape1?.attr('shadowOffsetY', 5);
+              circleShape1?.attr('shadowOffsetY', 7);
               circleShape1?.attr('shadowColor', 'rgba(0,0,0,0.23)');
+              circleShape1?.attr('shadowBlur', 3);
             }
           } else {
             keyShape?.attr('fill', null);