调整关系图节点大小

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

@@ -6,7 +6,7 @@ import G6 from '@antv/g6';
 import centerImg from '../assets/center.png';
 import expandImg from '../assets/expand.png';
 
-const minInnerRaduis = 20, imageWidth = 30, textFontSize = 8;
+const maxInnerRaduis = 40, imageWidth = 30, textFontSize = 8;
 
 const centerColorGroup = ['#D8E9FF', '#A7CEFF', '#196AD2'];
 const centerHighlightColorGroup = ['#99c6ff', '#4d8ddf', '#145ab3'];
@@ -73,14 +73,16 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
   });
 
   const calcRaduis = (node) => {
-    if (!node?.levelId) return { innerRaduis: minInnerRaduis, raduis: minInnerRaduis+30 };
+    if (!node?.levelId) return { innerRaduis: maxInnerRaduis, raduis: maxInnerRaduis+30 };
 
     const nodeLevel = node?.levelId.split('-').length;
-    let innerRaduis = minInnerRaduis;
-    if (nodeLevel===1) {
-      innerRaduis = minInnerRaduis + 10*(totalLevel - nodeLevel - 1) + 20;
-    } else if (nodeLevel > 1) {
-      innerRaduis = minInnerRaduis + 10*(totalLevel - nodeLevel);
+    let innerRaduis = maxInnerRaduis;
+    if (nodeLevel > 1) {
+      innerRaduis = maxInnerRaduis - 15 - 5*(nodeLevel - 2);
+    }
+
+    if (innerRaduis < 15) {
+      innerRaduis = 15;
     }
 
     return { innerRaduis, raduis: (innerRaduis+30) };
@@ -135,8 +137,10 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
         });
   
         const data = [
-          { type: 'expand', value: 50 },
-          { type: 'center', value: 50 }
+          { type: 'expand', value: 49.7 },
+          { type: 'interval1', value: 0.3 },
+          { type: 'center', value: 49.7 },
+          { type: 'interval2', value: 0.3 }
         ];
   
         view.data(data);
@@ -151,10 +155,9 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
           .interval()
           .adjust('stack')
           .position('value')
-          .color(chartColor)
+          .color('type',[chartColor, '#fff', chartColor, '#fff'])
           .style({
-            stroke: 'white',
-            lineWidth: 5,
+            lineWidth: 0,
             cursor: 'pointer',
           })
           .state({
@@ -162,7 +165,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
               style: (element) => {
                 const shape = element.shape;
                 return {
-                  lineWidth: 1,
+                  lineWidth: 0,
                   fillOpacity: shape.attr("fillOpacity")*0.4,
                 }
               }
@@ -315,6 +318,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
 
       if (!model?.virtual && model?.haveChild) {
         const group = item.getContainer();
+        console.log('group', group);
 
         const keyShape = group.get('children')[0];
         const pathShape1 = group.get('children')[1];