style: 拓扑基础节点

src/components/ChartGraphG6/index.vue

@@ -46,9 +46,7 @@ const props = defineProps({
 const g6Dom = ref<HTMLElement | undefined>(undefined);
 
 const ExtGraph = extend(Graph, {
-  // layouts: {
-  //   dagre: Extensions.DagreLayout,
-  // },
+  layouts: {},
   edges: {
     'polyline-edge': Extensions.PolylineEdge,
     'cubic-edge': Extensions.CubicEdge,
@@ -441,13 +439,6 @@ function initChart() {
   graph = new ExtGraph({
     container: g6Dom.value,
     height: 500,
-    plugins: [
-      {
-        // lod-controller will be automatically assigned to graph with `disableLod: false` to graph if it is not configured as following
-        type: 'lod-controller',
-        disableLod: true,
-      },
-    ] as any,
     modes: {
       default: [
         {
@@ -470,7 +461,17 @@ function initChart() {
         'zoom-canvas',
       ] as any,
     },
-
+    // 布局 力向吸引
+    layout: {
+      type: 'force',
+      animated: true,
+      linkDistance: 280,
+      maxSpeed: 100,
+      clustering: true,
+      nodeClusterBy: 'parentId',
+      clusterNodeStrength: 80,
+    },
+    // 主题
     theme: {
       type: 'spec',
       base: 'light',
@@ -480,6 +481,14 @@ function initChart() {
         },
       },
     } as any,
+    // 插件
+    plugins: [
+      {
+        // 避免文本过于密集导致的视觉混乱
+        type: 'lod-controller',
+        disableLod: true,
+      },
+    ] as any,
     // 全局节点 矩形
     node: model => {
       const { id, data } = model;
@@ -559,12 +568,12 @@ function initChart() {
         },
       };
     },
+    // 全局框节点 矩形
     combo: model => {
       const { id, data } = model;
       return {
         id,
         data: {
-          ...data,
           type: 'rect-combo',
           keyShape: {
             opacity: 0.8,
@@ -576,6 +585,19 @@ function initChart() {
             offsetY: 8,
           },
           labelBackgroundShape: {},
+          buildIn: [
+            {
+              fields: ['opacity'],
+              duration: 500,
+              delay: 500 + Math.random() * 500,
+            },
+          ],
+          buildOut: [
+            {
+              fields: ['opacity'],
+              duration: 200,
+            },
+          ],
           animates: {
             update: [
               {
@@ -584,6 +606,7 @@ function initChart() {
               },
             ],
           },
+          ...data,
         },
       };
     },
@@ -685,7 +708,7 @@ function initChart() {
 const actions = {
   'Enable/Disable Node States': {
     Breathing: () => {
-      graph.getAllNodesData().forEach((node:any) => {
+      graph.getAllNodesData().forEach((node: any) => {
         if (graph.getItemState(node.id, 'breathing')) {
           graph.setItemState(node.id, 'breathing', false);
         } else {
@@ -695,7 +718,7 @@ const actions = {
       });
     },
     Scaling: () => {
-      graph.getAllNodesData().forEach((node:any) => {
+      graph.getAllNodesData().forEach((node: any) => {
         if (graph.getItemState(node.id, 'scaling')) {
           graph.setItemState(node.id, 'scaling', false);
         } else {
@@ -707,7 +730,7 @@ const actions = {
   },
   'Enable/Disable Edge States': {
     Growing: () => {
-      graph.getAllEdgesData().forEach((edge:any) => {
+      graph.getAllEdgesData().forEach((edge: any) => {
         if (graph.getItemState(edge.id, 'growing')) {
           graph.setItemState(edge.id, 'growing', false);
         } else {
@@ -717,7 +740,7 @@ const actions = {
       });
     },
     Running: () => {
-      graph.getAllEdgesData().forEach((edge:any) => {
+      graph.getAllEdgesData().forEach((edge: any) => {
         if (graph.getItemState(edge.id, 'running')) {
           graph.setItemState(edge.id, 'running', false);
         } else {