refactor: refactor fix-element-size behavior and add information density example

packages/g6/__tests__/demos/behavior-auto-adapt-label.ts

@@ -61,6 +61,7 @@ export const behaviorAutoAdaptLabel: TestCase = async (context) => {
         maxSize: 60,
         minSize: 12,
         scale: 'linear',
+        syncToLabelSize: true,
       },
     ],
     plugins: [{ type: 'background', background: '#fff' }],

packages/g6/__tests__/demos/behavior-fix-element-size.ts

@@ -58,6 +58,8 @@ export const behaviorFixElementSize: TestCase = async (context) => {
       {
         type: 'fix-element-size',
         key: 'fix-element-size',
+        state: 'selected',
+        reset: true,
       },
       { type: 'click-select', key: 'click-select', multiple: true },
     ],

packages/g6/__tests__/demos/case-language-tree.ts

@@ -1,27 +1,45 @@
 import { labelPropagation } from '@antv/algorithm';
-import { Graph, NodeData } from '@antv/g6';
+import type { Element, IPointerEvent, NodeData } from '@antv/g6';
+import { Graph } from '@antv/g6';
 import data from '../dataset/language-tree.json';
 
 export const caseLanguageTree: TestCase = async (context) => {
   const size = (node: NodeData) => Math.max(...(node.style?.size as [number, number, number]));
 
   const graph = new Graph({
     ...context,
-    autoFit: 'view',
     data: {
       ...data,
       nodes: labelPropagation(data).clusters.flatMap((cluster) => cluster.nodes),
     },
     node: {
       style: {
-        labelText: (d) => d.id,
+        label: true,
         labelBackground: true,
+        labelPadding: [0, 4],
+        labelText: (d) => d.id,
+        icon: true,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
       },
+      state: {
+        inactive: {
+          fill: '#E0E0E0',
+          fillOpacity: 1,
+          icon: false,
+          label: false,
+          labelBackground: false,
+        },
+      },
       palette: {
         field: (d) => d.clusterId,
       },
     },
+    edge: {
+      style: {
+        stroke: '#E0E0E0',
+        endArrow: true,
+      },
+    },
     layout: {
       type: 'd3-force',
       link: {
@@ -35,17 +53,44 @@ export const caseLanguageTree: TestCase = async (context) => {
       },
       animation: false,
     },
-    transforms: ['map-node-size'],
+    transforms: [
+      {
+        key: 'map-node-size',
+        type: 'map-node-size',
+        scale: 'log',
+      },
+    ],
     behaviors: [
       'drag-canvas',
       'zoom-canvas',
+      function () {
+        return {
+          key: 'hover-activate',
+          type: 'hover-activate',
+          enable: true,
+          degree: 1,
+          inactiveState: 'inactive',
+          onHover: (e: IPointerEvent<Element>) => {
+            this.frontElement(e.target.id);
+            e.view.setCursor('pointer');
+          },
+          onHoverEnd: (e: IPointerEvent<Element>) => {
+            e.view.setCursor('default');
+          },
+        };
+      },
+      {
+        key: 'fix-element-size',
+        type: 'fix-element-size',
+        enable: true,
+        node: [{ shape: 'label' }],
+      },
       {
-        key: 'hover-activate',
-        type: 'hover-activate',
-        degree: 1,
-        inactiveState: 'inactive',
+        key: 'auto-adapt-label',
+        type: 'auto-adapt-label',
       },
     ],
+    plugins: [{ type: 'background', background: '#fff' }],
     animation: false,
   });
 

packages/g6/__tests__/demos/case-unicorns-investors.ts

@@ -0,0 +1,120 @@
+import type { Element, ElementDatum, IElementEvent, IPointerEvent, NodeData } from '@/src';
+import { Graph } from '@/src';
+
+/**
+ * Inspired by https://graphcommons.com/graphs/be8bc972-5b26-4f5c-837d-a34704f33a9e
+ * Network Map of 🦄 Unicorns and Their 💰Investors
+ * 1086 nodes, 1247 edges
+ *
+ * 10 VC firms in Silicon Valley funded 82% of all unicorns, 98% of all exited unicorns. Data from CB Insights, updated March 2020.
+ * @param context
+ */
+export const caseUnicornsInvestors: TestCase = async (context) => {
+  const data = await fetch('https://assets.antv.antgroup.com/g6/unicorns-investors.json').then((res) => res.json());
+
+  const size = (node: NodeData) => Math.max(...(node.style?.size as [number, number, number]));
+
+  const graph = new Graph({
+    ...context,
+    data,
+    node: {
+      style: {
+        label: true,
+        labelText: (d) => d.data?.name,
+        labelBackground: true,
+        icon: true,
+        iconText: (d) => (d.data?.type === 'Investor' ? '💰' : '🦄️'),
+        fill: (d) => (d.data?.type === 'Investor' ? '#6495ED' : '#FFA07A'),
+      },
+      state: {
+        inactive: {
+          fillOpacity: 0.3,
+          icon: false,
+          label: false,
+        },
+      },
+    },
+    edge: {
+      style: {
+        label: false,
+        labelText: (d) => d.data?.type,
+        labelBackground: true,
+      },
+      state: {
+        active: {
+          label: true,
+        },
+        inactive: {
+          strokeOpacity: 0,
+        },
+      },
+    },
+    layout: {
+      type: 'd3-force',
+      link: { distance: (edge) => size(edge.source) + size(edge.target) },
+      collide: { radius: (node: NodeData) => size(node) },
+      manyBody: { strength: (node: NodeData) => -4 * size(node) },
+      animation: false,
+    },
+    transforms: [
+      {
+        type: 'map-node-size',
+        scale: 'linear',
+        maxSize: 60,
+        minSize: 20,
+        syncToLabelSize: {
+          maxFontSize: 16,
+          minFontSize: 12,
+        },
+      },
+    ],
+    behaviors: [
+      'drag-canvas',
+      'zoom-canvas',
+      function () {
+        return {
+          key: 'hover-activate',
+          type: 'hover-activate',
+          enable: (e: IPointerEvent<Element>) => e.targetType === 'node',
+          degree: 1,
+          inactiveState: 'inactive',
+          onHover: (e: IPointerEvent<Element>) => {
+            this.frontElement(e.target.id);
+            e.view.setCursor('pointer');
+          },
+          onHoverEnd: (e: IPointerEvent<Element>) => {
+            e.view.setCursor('default');
+          },
+        };
+      },
+      { type: 'fix-element-size', enable: true },
+      'auto-adapt-label',
+    ],
+    plugins: [
+      {
+        type: 'tooltip',
+        position: 'right',
+        enable: (e: IElementEvent) => e.targetType === 'node',
+        getContent: (e: IElementEvent, items: ElementDatum[]) => {
+          const { type, name } = items[0].data as { type: string; name: string };
+          const color = type === 'Investor' ? '#6495ED' : '#FFA07A';
+          return `<div>
+            <div style="font-weight: bold; font-size: 9px; color: ${color};">${type}</div>
+            <div class="tooltip-name">${name}</div>
+          </div>`;
+        },
+        style: {
+          '.tooltip': {
+            padding: '2px 8px',
+            'border-radius': '8px',
+          },
+        },
+      },
+    ],
+    animation: false,
+  });
+
+  await graph.render();
+
+  return graph;
+};

packages/g6/__tests__/demos/index.ts

@@ -28,6 +28,7 @@ export { caseLanguageTree } from './case-language-tree';
 export { caseMindmap } from './case-mindmap';
 export { caseOrgChart } from './case-org-chart';
 export { caseRadialDendrogram } from './case-radial-dendrogram';
+export { caseUnicornsInvestors } from './case-unicorns-investors';
 export { caseWhyDoCats } from './case-why-do-cats';
 export { commonGraph } from './common-graph';
 export { controllerViewport } from './controller-viewport';

packages/g6/__tests__/demos/transform-map-node-size.ts

@@ -24,14 +24,15 @@ export const transformMapNodeSize: TestCase = async (context) => {
       {
         key: 'map-node-size',
         type: 'map-node-size',
+        scale: 'log',
       },
     ],
     animation: false,
   });
 
   await graph.render();
 
-  const config = { 'centrality.type': 'eigenvector' };
+  const config = { 'centrality.type': 'eigenvector', syncToLabelSize: false };
 
   transformMapNodeSize.form = (panel) => [
     panel
@@ -41,6 +42,13 @@ export const transformMapNodeSize: TestCase = async (context) => {
         graph.updateTransform({ key: 'map-node-size', centrality: { type } });
         graph.draw();
       }),
+    panel
+      .add(config, 'syncToLabelSize')
+      .name('Sync To Label Size')
+      .onChange((syncToLabelSize: boolean) => {
+        graph.updateTransform({ key: 'map-node-size', syncToLabelSize });
+        graph.draw();
+      }),
   ];
 
   return graph;