docs: add unicorns and investors demo

antvis · Oct 14, 2024 · 03e82a4 · 03e82a4
1 parent bd29696
commit 03e82a4
Show file tree

Hide file tree

Showing 9 changed files with 41,347 additions and 14 deletions.
diff --git a/packages/g6/__tests__/dataset/unicorns-investors.json b/packages/g6/__tests__/dataset/unicorns-investors.json
diff --git a/packages/g6/__tests__/demos/case-unicorns-investors.ts b/packages/g6/__tests__/demos/case-unicorns-investors.ts
@@ -0,0 +1,122 @@
+import type { Element, ElementDatum, IElementEvent, IPointerEvent, NodeData } from '@/src';
+import { Graph } from '@/src';
+import data from '@@/dataset/unicorns-investors.json';
+
+/**
+ * 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 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: {
+          fill: '#E0E0E0',
+          fillOpacity: 1,
+          icon: false,
+          label: false,
+          labelBackground: false,
+        },
+      },
+    },
+    edge: {
+      style: {
+        label: false,
+        labelText: (d) => d.data?.type,
+        labelBackground: true,
+        lineWidth: 1,
+      },
+      state: {
+        active: {
+          lineWidth: 3,
+          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: 80,
+        minSize: 20,
+      },
+    ],
+    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');
+          },
+        };
+      },
+      {
+        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;
+};
diff --git a/packages/g6/__tests__/demos/index.ts b/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';

diff --git a/packages/site/examples/behavior/fix-element-size/demo/autosize-label.js b/packages/site/examples/behavior/fix-element-size/demo/autosize-label.js
@@ -64,7 +64,6 @@ const graph = new Graph({
       type: 'fix-element-size',
       key: 'fix-element-size',
       enable: true,
-      state: undefined,
       node: [
         {
           shape: (shapes) =>

diff --git a/packages/site/examples/behavior/fix-element-size/demo/fix-font-size.js b/packages/site/examples/behavior/fix-element-size/demo/fix-font-size.js
@@ -0,0 +1,69 @@
+import { Graph } from '@antv/g6';
+
+const data = {
+  nodes: [
+    { id: 'node0', size: 50, label: '0', style: { x: 326, y: 268 } },
+    { id: 'node1', size: 30, label: '1', style: { x: 280, y: 384 } },
+    { id: 'node2', size: 30, label: '2', style: { x: 234, y: 167 } },
+    { id: 'node3', size: 30, label: '3', style: { x: 391, y: 368 } },
+    { id: 'node4', size: 30, label: '4', style: { x: 444, y: 209 } },
+    { id: 'node5', size: 30, label: '5', style: { x: 378, y: 157 } },
+    { id: 'node6', size: 15, label: '6', style: { x: 229, y: 400 } },
+    { id: 'node7', size: 15, label: '7', style: { x: 281, y: 440 } },
+    { id: 'node8', size: 15, label: '8', style: { x: 188, y: 119 } },
+    { id: 'node9', size: 15, label: '9', style: { x: 287, y: 157 } },
+    { id: 'node10', size: 15, label: '10', style: { x: 185, y: 200 } },
+    { id: 'node11', size: 15, label: '11', style: { x: 238, y: 110 } },
+    { id: 'node12', size: 15, label: '12', style: { x: 239, y: 221 } },
+    { id: 'node13', size: 15, label: '13', style: { x: 176, y: 160 } },
+    { id: 'node14', size: 15, label: '14', style: { x: 389, y: 423 } },
+    { id: 'node15', size: 15, label: '15', style: { x: 441, y: 341 } },
+    { id: 'node16', size: 15, label: '16', style: { x: 442, y: 398 } },
+  ],
+  edges: [
+    { source: 'node0', target: 'node1', label: '0-1' },
+    { source: 'node0', target: 'node2', label: '0-2' },
+    { source: 'node0', target: 'node3', label: '0-3' },
+    { source: 'node0', target: 'node4', label: '0-4' },
+    { source: 'node0', target: 'node5', label: '0-5' },
+    { source: 'node1', target: 'node6', label: '1-6' },
+    { source: 'node1', target: 'node7', label: '1-7' },
+    { source: 'node2', target: 'node8', label: '2-8' },
+    { source: 'node2', target: 'node9', label: '2-9' },
+    { source: 'node2', target: 'node10', label: '2-10' },
+    { source: 'node2', target: 'node11', label: '2-11' },
+    { source: 'node2', target: 'node12', label: '2-12' },
+    { source: 'node2', target: 'node13', label: '2-13' },
+    { source: 'node3', target: 'node14', label: '3-14' },
+    { source: 'node3', target: 'node15', label: '3-15' },
+    { source: 'node3', target: 'node16', label: '3-16' },
+  ],
+};
+
+const graph = new Graph({
+  container: 'container',
+  data,
+  node: {
+    style: {
+      labelBackground: true,
+      labelBackgroundFill: '#FFB6C1',
+      labelBackgroundRadius: 4,
+      labelFontFamily: 'Arial',
+      labelPadding: [0, 4],
+      labelText: (d) => d.id,
+      size: (d) => d.size,
+    },
+  },
+  behaviors: [
+    'zoom-canvas',
+    'drag-canvas',
+    {
+      key: 'fix-element-size',
+      type: 'fix-element-size',
+      enable: true,
+      node: { shape: 'label' },
+    },
+  ],
+});
+
+graph.render();
diff --git a/packages/site/examples/behavior/fix-element-size/demo/fix-size.js b/packages/site/examples/behavior/fix-element-size/demo/fix-size.js
@@ -53,22 +53,13 @@ const graph = new Graph({
   edge: { style: { labelText: (d) => d.label } },
   behaviors: [
     'zoom-canvas',
+    'drag-canvas',
     {
-      type: 'fix-element-size',
       key: 'fix-element-size',
+      type: 'fix-element-size',
       enable: (event) => event.data.scale < 1,
       state: 'selected',
-      edge: [
-        {
-          shape: (shapes) => shapes.find((shape) => shape.className === 'key'),
-          fields: ['lineWidth'],
-        },
-        {
-          shape: (shapes) =>
-            shapes.find((shape) => shape.parentElement?.className === 'label' && shape.className === 'text'),
-          fields: ['fontSize', 'lineHeight'],
-        },
-      ],
+      reset: true,
     },
     { type: 'click-select', key: 'click-select', multiple: true },
   ],

diff --git a/packages/site/examples/behavior/fix-element-size/demo/meta.json b/packages/site/examples/behavior/fix-element-size/demo/meta.json
@@ -18,7 +18,15 @@
         "zh": "缩放过程中动态调整标签的最大长度",
         "en": "Auto Size Label While Zooming"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PnrKRYX70pIAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ggOXQqiwhboAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "fix-font-size.js",
+      "title": {
+        "zh": "缩放过程中字号保持",
+        "en": "Fix Font Size While Zooming"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*nLPOTaYUEO4AAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }
diff --git a/packages/site/examples/feature/default/demo/meta.json b/packages/site/examples/feature/default/demo/meta.json
@@ -27,6 +27,14 @@
         "en": "3D Massive Data"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ZQoEQLKazPIAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "unicorns-investors.js",
+      "title": {
+        "zh": "信息密度",
+        "en": "Information Density"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HfH8SodrHo4AAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }