✨ add advanced example:find-connections and node-expand

packages/graphin-site/examples/advanced/find-connections/demo/Simple.jsx

@@ -0,0 +1,150 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Graphin, { Utils } from '@antv/graphin';
+import { Toolbar } from '@antv/graphin-components';
+import { message } from 'antd';
+import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
+import '@antv/graphin-components/dist/index.css'; // 引入Graphin CSS
+
+const chunk = (arr, size) =>
+  Array.from({ length: Math.ceil(arr.length / size) }, (v, i) => arr.slice(i * size, i * size + size));
+
+const App = () => {
+  const [state, setState] = React.useState({
+    selected: [],
+    data: Utils.mock(20)
+      .random()
+      .graphin(),
+  });
+
+  const { data, selected } = state;
+  const graphRef = React.createRef(null);
+  React.useEffect(() => {
+    const { graph } = graphRef.current;
+
+    // TODO:框选进行关系扩散，暂时不支持多选
+    const onNodeSelectChange = e => {
+      if (e.target) {
+        console.info('圈选是targets参数');
+        return;
+      }
+      const nodes = e.targets.nodes.map(node => {
+        return node.get('model');
+      });
+
+      setState({
+        ...state,
+        selected: nodes,
+      });
+    };
+    graph.on('nodeselectchange', onNodeSelectChange);
+
+    return () => {
+      graph.off('nodeselectchange', onNodeSelectChange);
+    };
+  }, [state]);
+
+  const onFindConnections = () => {
+    if (selected.length === 0) {
+      message.info('请先选中/圈选节点');
+      return;
+    }
+
+    const findConnectionData = { nodes: [], edges: [] };
+    // 1度扩散，中间经历一个节点
+    const sortArray = chunk(selected, 2);
+    sortArray.forEach(arr => {
+      const [source, target = selected[0]] = arr;
+
+      const relativeNode = {
+        id: `find-node-${source.id}-${target.id}`,
+        shape: 'CanonicalCircleNode',
+        label: 'discover node',
+        style: {
+          primaryColor: '#ff7617',
+          icon: 'home',
+          nodeSize: 20,
+        },
+        data: {
+          id: `find-node-${source.id}-${target.id}`,
+        },
+      };
+      findConnectionData.nodes.push(...arr, relativeNode);
+      findConnectionData.edges.push(
+        {
+          source: source.id,
+          target: relativeNode.id,
+          shape: 'CanonicalLineEdge',
+          label: '一度发现',
+          style: {
+            line: {
+              dash: [2, 2],
+            },
+          },
+          data: {
+            source: source.id,
+            target: relativeNode.id,
+          },
+        },
+        {
+          source: relativeNode.id,
+          target: target.id,
+          shape: 'CanonicalLineEdge',
+          label: '一度发现',
+          style: {
+            line: {
+              dash: [2, 2],
+            },
+          },
+          data: {
+            source: relativeNode.id,
+            target: target.id,
+          },
+        },
+      );
+    });
+
+    setState({
+      ...state,
+      data: {
+        // 还需要对Node和Edge去重，这里暂不考虑
+        nodes: [...state.data.nodes, ...findConnectionData.nodes],
+        edges: [...state.data.edges, ...findConnectionData.edges],
+      },
+    });
+  };
+
+  return (
+    <div className="App">
+      <h3>
+        基于力导的关系发现：按住Shift圈选你需要发现关系的节点
+        <button onClick={onFindConnections} style={{ float: 'right', height: '28px', lineHeight: '28px' }}>
+          点击发现关系
+        </button>
+      </h3>
+      <Graphin
+        data={data}
+        layout={{
+          name: 'force',
+          options: {
+            defSpringLen: (_edge, source, target) => {
+              /** 默认返回的是 200 的弹簧长度 */
+              /** 如果你要想要产生聚类的效果，可以考虑 根据边两边节点的度数来动态设置边的初始化长度：度数越小，则边越短 */
+              const nodeSize = 30;
+              const Sdegree = source.data.layout?.degree;
+              const Tdegree = target.data.layout?.degree;
+              const minDegree = Math.min(Sdegree, Tdegree);
+              return minDegree < 3 ? nodeSize * 5 : minDegree * nodeSize * 2;
+            },
+          },
+        }}
+        ref={graphRef}
+      >
+        <Toolbar style={{ position: 'absolute', bottom: 28, left: 28 }} />
+      </Graphin>
+    </div>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('container'));

packages/graphin-site/examples/advanced/find-connections/demo/meta.json

@@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "Simple.jsx",
+      "title": "关系发现",
+      "screenshot": ""
+    }
+  ]
+}

packages/graphin-site/examples/advanced/find-connections/index.zh.md

@@ -0,0 +1,6 @@
+---
+title: 关系发现
+order: 0
+---
+
+- 根据六度分割理论，发现可能隐藏的关联关系。

packages/graphin-site/examples/advanced/node-expand/demo/Dagre.jsx

@@ -0,0 +1,78 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { message } from 'antd';
+import Graphin, { Utils } from '@antv/graphin';
+import { Toolbar } from '@antv/graphin-components';
+import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
+import '@antv/graphin-components/dist/index.css'; // 引入Graphin CSS
+
+const App = () => {
+  const [state, setState] = React.useState({
+    selected: [],
+    data: Utils.mock(5)
+      .circle()
+      .graphin(),
+  });
+
+  const { data, selected } = state;
+  const graphRef = React.createRef(null);
+  React.useEffect(() => {
+    const { graph } = graphRef.current;
+    const onNodeClick = e => {
+      setState({
+        ...state,
+        selected: [e.item.get('model')],
+      });
+    };
+    graph.on('node:click', onNodeClick);
+    return () => {
+      graph.off('node:click', onNodeClick);
+    };
+  }, [state]);
+
+  const onExpand = () => {
+    if (selected.length === 0) {
+      message.info('请先选中/圈选节点');
+      return;
+    }
+    const count = Math.round(Math.random() * 20);
+
+    const expandData = Utils.mock(count)
+      .expand(selected)
+      .type('company')
+      .graphin();
+
+    setState({
+      ...state,
+      data: {
+        // 还需要对Node和Edge去重，这里暂不考虑
+        nodes: [...state.data.nodes, ...expandData.nodes],
+        edges: [...state.data.edges, ...expandData.edges],
+      },
+    });
+  };
+
+  return (
+    <div className="App">
+      <h3>
+        基于有向分层的节点扩散
+        <button onClick={onExpand} style={{ float: 'right', height: '28px', lineHeight: '28px' }}>
+          点击扩散
+        </button>
+      </h3>
+
+      <Graphin
+        data={data}
+        layout={{
+          name: 'dagre',
+        }}
+        ref={graphRef}
+      >
+        <Toolbar style={{ position: 'absolute', bottom: 28, left: 28 }} />
+      </Graphin>
+    </div>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('container'));

packages/graphin-site/examples/advanced/node-expand/demo/Force.jsx

@@ -0,0 +1,108 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Graphin, { Utils } from '@antv/graphin';
+import { Toolbar } from '@antv/graphin-components';
+import { message } from 'antd';
+import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
+import '@antv/graphin-components/dist/index.css'; // 引入Graphin CSS
+
+const App = () => {
+  const [state, setState] = React.useState({
+    selected: [],
+    data: Utils.mock(5)
+      .circle()
+      .graphin(),
+  });
+
+  const { data, selected } = state;
+  const graphRef = React.createRef(null);
+  React.useEffect(() => {
+    const { graph } = graphRef.current;
+
+    const onNodeClick = e => {
+      setState({
+        ...state,
+        selected: [e.item.get('model')],
+      });
+    };
+
+    graph.on('node:click', onNodeClick);
+    // TODO:框选进行关系扩散，暂时不支持多选
+    const onNodeSelectChange = e => {
+      if (e.target) {
+        console.info('圈选是targets参数');
+        return;
+      }
+      const nodes = e.targets.nodes.map(node => {
+        return node.get('model');
+      });
+
+      setState({
+        ...state,
+        selected: nodes,
+      });
+    };
+    graph.on('nodeselectchange', onNodeSelectChange);
+
+    return () => {
+      graph.off('node:click', onNodeClick);
+      graph.off('nodeselectchange', onNodeSelectChange);
+    };
+  }, [state]);
+
+  const onExpand = () => {
+    if (selected.length === 0) {
+      message.info('请先选中/圈选节点');
+      return;
+    }
+    const count = Math.round(Math.random() * 20);
+
+    const expandData = Utils.mock(count)
+      .expand(selected)
+      .type('company')
+      .graphin();
+
+    setState({
+      ...state,
+      data: {
+        // 还需要对Node和Edge去重，这里暂不考虑
+        nodes: [...state.data.nodes, ...expandData.nodes],
+        edges: [...state.data.edges, ...expandData.edges],
+      },
+    });
+  };
+  return (
+    <div className="App">
+      <h3>
+        基于力导的节点扩散，支持按住Shift圈选，多个节点同时扩散
+        <button onClick={onExpand} style={{ float: 'right', height: '28px', lineHeight: '28px' }}>
+          点击扩散
+        </button>
+      </h3>
+      <Graphin
+        data={data}
+        layout={{
+          name: 'force',
+          options: {
+            defSpringLen: (_edge, source, target) => {
+              /** 默认返回的是 200 的弹簧长度 */
+
+              /** 如果你要想要产生聚类的效果，可以考虑 根据边两边节点的度数来动态设置边的初始化长度：度数越小，则边越短 */
+              const nodeSize = 30;
+              const Sdegree = source.data.layout?.degree;
+              const Tdegree = target.data.layout?.degree;
+              const minDegree = Math.min(Sdegree, Tdegree);
+              return minDegree < 3 ? nodeSize * 5 : minDegree * nodeSize * 2;
+            },
+          },
+        }}
+        ref={graphRef}
+      >
+        <Toolbar style={{ position: 'absolute', bottom: 28, left: 28 }} />
+      </Graphin>
+    </div>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('container'));

packages/graphin-site/examples/advanced/node-expand/demo/meta.json

@@ -0,0 +1,18 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "Force.jsx",
+      "title": "力导布局下的关系扩散",
+      "screenshot": ""
+    },
+    {
+      "filename": "Dagre.jsx",
+      "title": "有向分层下的关系扩散",
+      "screenshot": ""
+    }
+  ]
+}

packages/graphin-site/examples/advanced/node-expand/index.zh.md

@@ -0,0 +1,6 @@
+---
+title: 节点扩散
+order: 0
+---
+
+- 利用风险聚集原理，由一个风险节点扩散去找其他风险节点。