chore:adjust layout demos

antvis · Feb 10, 2021 · 7a2849e · 7a2849e
1 parent 6c2aa98
commit 7a2849e
Show file tree

Hide file tree

Showing 16 changed files with 265 additions and 465 deletions.
diff --git a/packages/graphin/docs/layout/combo/index.md b/packages/graphin/docs/layout/combo/index.md
@@ -0,0 +1,19 @@
+---
+title: 分组布局
+group:
+  path: /layout
+  title: 布局方案
+nav:
+  path: /graphin
+  order: 2
+---
+
+## 分组布局
+
+当数据有明显聚类特征，采用分组布局即使非常好的方式，行业内有几种常见的布局方式:
+
+- [`Combo 缩放功箱布局`](https://cambridge-intelligence.com/graph-visualization-rectangular-combos/) @keylines
+- [`CirclePacking 布局`](https://observablehq.com/@d3/zoomable-circle-packing) @d3-circle-packing
+- [`Group Clustering 布局`](https://doc.linkurio.us/ogma/latest/examples/visual-grouping.html) @linkurio
+
+> 注意 ⚠️ ：Graphin 目前对这块的功能还处于研究中，如果你感兴趣，欢迎在 github 上与我们交流～
diff --git a/.../graphin/docs/layout/node-combo/index.tsx → packages/graphin/docs/layout/combo/index.tsx b/.../graphin/docs/layout/node-combo/index.tsx → packages/graphin/docs/layout/combo/index.tsx
@@ -114,10 +114,7 @@ const transTree2Graphin = sourceData => {
 };
 
 const pack = data =>
-  d3
-    .pack()
-    .size([1000, 500])
-    .padding(3)(
+  d3.pack().size([1000, 500]).padding(3)(
     d3
       .hierarchy(data)
 

diff --git a/packages/graphin/docs/layout/dynamic-layout/demos/graphin-force.tsx b/packages/graphin/docs/layout/dynamic-layout/demos/graphin-force.tsx
@@ -0,0 +1,129 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { Row, Col, Card } from 'antd';
+import Graphin, { Utils } from '@antv/graphin';
+import { ContextMenu } from '@antv/graphin-components';
+import { TagFilled, DeleteFilled, ExpandAltOutlined } from '@ant-design/icons';
+
+// 引入Graphin CSS
+
+const { Menu } = ContextMenu;
+const defSpreingLen = (_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);
+  console.log(minDegree < 3 ? nodeSize * 5 : minDegree * nodeSize);
+  return minDegree < 3 ? nodeSize * 5 : minDegree * nodeSize;
+};
+
+const App = () => {
+  const [state, setState] = React.useState({
+    selected: [],
+    data: Utils.mock(5).circle().graphin(),
+  });
+
+  const handleChange = (menuItem, menuData) => {
+    console.log(menuItem, menuData);
+    const count = 4;
+    const expandData = Utils.mock(count).expand([menuData]).type('company').graphin();
+
+    setState({
+      ...state,
+      data: {
+        // 还需要对Node和Edge去重，这里暂不考虑
+        nodes: [...state.data.nodes, ...expandData.nodes],
+        edges: [...state.data.edges, ...expandData.edges],
+      },
+    });
+  };
+  const { data } = state;
+  return (
+    <div className="App">
+      <Row gutter={16}>
+        <Col span={12}>
+          <Card title="GraphinForce：无动画扩散">
+            <Graphin
+              data={data}
+              layout={{
+                type: 'graphin-force',
+                preset: {
+                  type: 'concentric',
+                },
+                animation: false,
+                defSpringLen: defSpreingLen,
+              }}
+            >
+              <ContextMenu bindType="node" style={{ width: 100 }}>
+                <Menu
+                  bindType="node"
+                  options={[
+                    {
+                      key: 'expand',
+                      icon: <ExpandAltOutlined />,
+                      name: '一度扩散',
+                    },
+                    {
+                      key: 'tag',
+                      icon: <TagFilled />,
+                      name: '节点打标',
+                    },
+                    {
+                      key: 'delete',
+                      icon: <DeleteFilled />,
+                      name: '节点删除',
+                    },
+                  ]}
+                  onChange={handleChange}
+                />
+              </ContextMenu>
+            </Graphin>
+          </Card>
+        </Col>
+        <Col span={12}>
+          <Card title="GraphinForce：有动画扩散">
+            <Graphin
+              data={data}
+              layout={{
+                type: 'graphin-force',
+                preset: {
+                  type: 'concentric',
+                },
+                animation: true,
+                defSpringLen: defSpreingLen,
+              }}
+            >
+              <ContextMenu bindType="node" style={{ width: 100 }}>
+                <Menu
+                  bindType="node"
+                  options={[
+                    {
+                      key: 'expand',
+                      icon: <ExpandAltOutlined />,
+                      name: '一度扩散',
+                    },
+                    {
+                      key: 'tag',
+                      icon: <TagFilled />,
+                      name: '节点打标',
+                    },
+                    {
+                      key: 'delete',
+                      icon: <DeleteFilled />,
+                      name: '节点删除',
+                    },
+                  ]}
+                  onChange={handleChange}
+                />
+              </ContextMenu>
+            </Graphin>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/graphin/docs/layout/dynamic-layout/demos/normal-layout.tsx b/packages/graphin/docs/layout/dynamic-layout/demos/normal-layout.tsx
@@ -0,0 +1,89 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { Row, Col, Card } from 'antd';
+import Graphin, { Utils } from '@antv/graphin';
+import { ContextMenu } from '@antv/graphin-components';
+import { ExpandAltOutlined } from '@ant-design/icons';
+
+// 引入Graphin CSS
+
+const { Menu } = ContextMenu;
+
+const App = () => {
+  const [state, setState] = React.useState({
+    selected: [],
+    data: Utils.mock(5).circle().graphin(),
+  });
+
+  const handleChange = (menuItem, menuData) => {
+    console.log(menuItem, menuData);
+    const count = 4;
+    const expandData = Utils.mock(count).expand([menuData]).graphin();
+
+    setState({
+      ...state,
+      data: {
+        // 还需要对Node和Edge去重，这里暂不考虑
+        nodes: [...state.data.nodes, ...expandData.nodes],
+        edges: [...state.data.edges, ...expandData.edges],
+      },
+    });
+  };
+  const { data } = state;
+  return (
+    <div className="App">
+      <Row gutter={16}>
+        <Col span={12}>
+          <Card title="同心圆布局：Concentric">
+            <Graphin
+              data={data}
+              layout={{
+                type: 'concentric',
+              }}
+            >
+              <ContextMenu bindType="node" style={{ width: 100 }}>
+                <Menu
+                  bindType="node"
+                  options={[
+                    {
+                      key: 'expand',
+                      icon: <ExpandAltOutlined />,
+                      name: '一度扩散',
+                    },
+                  ]}
+                  onChange={handleChange}
+                />
+              </ContextMenu>
+            </Graphin>
+          </Card>
+        </Col>
+        <Col span={12}>
+          <Card title="有向分层布局：Dagre">
+            <Graphin
+              data={data}
+              layout={{
+                type: 'dagre',
+              }}
+            >
+              <ContextMenu bindType="node" style={{ width: 100 }}>
+                <Menu
+                  bindType="node"
+                  options={[
+                    {
+                      key: 'expand',
+                      icon: <ExpandAltOutlined />,
+                      name: '一度扩散',
+                    },
+                  ]}
+                  onChange={handleChange}
+                />
+              </ContextMenu>
+            </Graphin>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/graphin/docs/layout/dynamic-layout/index.md b/packages/graphin/docs/layout/dynamic-layout/index.md
@@ -0,0 +1,27 @@
+---
+title: 动态布局
+group:
+  path: /layout
+  title: 布局方案
+  order: 9
+nav:
+  path: /graphin
+  order: 2
+---
+
+## 动态布局
+
+`动态布局`是指 布局的过程是动态，可以根据`数据的变化而变化`。因此我们也称之为数据响应布局，比如在 画布分析过程中，需要对数据进行 添加，删除，修改。如果此时对应的布局也需要改变，则我们称之为`动态布局`。
+
+在 Graphin 中，将动态布局分为两类：
+
+- 第一类为普通布局算法的动态布局，比如`circular`,`grid`等，数据的变化后，重新执行该布局函数，通过计算两次布局后节点的最终位置，加以补间动画完成布局响应，因此也称之为`数据响应布局`
+- 第二类为力导布局的动态布局。比如`d3-force`,`graphin-force`等。数据变化后，并不能通过再次执行该布局函数就能得到理想的布局，需要对力导的前置布局做预处理，对力的施加处理策略，是一个渐进的过程，因此也称之为`力导渐进布局`
+
+## 【普通布局】动态布局（数据响应布局）
+
+<code src='./demos/normal-layout.tsx'>
+
+## 【力导布局】动态布局（力导渐进布局）
+
+<code src='./demos/graphin-force.tsx'>
diff --git a/packages/graphin/docs/layout/index.md b/packages/graphin/docs/layout/index.md
@@ -6,7 +6,6 @@ group:
   title: 布局方案
   order: 2
 nav:
-  title: Graphin
   path: /graphin
   order: 0
 ---

diff --git a/packages/graphin/docs/layout/network/index.md b/packages/graphin/docs/layout/network/index.md
@@ -6,7 +6,6 @@ group:
   title: 布局方案
   order: 2
 nav:
-  title: Graphin
   path: /graphin
   order: 0
 ---

diff --git a/packages/graphin/docs/layout/node-combo/index.md b/packages/graphin/docs/layout/node-combo/index.md