feat:add graph-database solution case

antvis · Feb 9, 2021 · 53606fe · 53606fe
1 parent d1b7b4c
commit 53606fe
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 38 deletions.
diff --git a/packages/graphin/docs/case/graph-database/graph-schema/index.md b/packages/graphin/docs/case/graph-database/graph-schema/index.md
@@ -3,12 +3,34 @@ title: 数据建模
 group:
   path: /database
   title: 图数据库
+  order: 0
 nav:
   title: 领域方案
   path: /case
   order: 4
 ---
 
+> 注意 ⚠️ ： 该方案还在开发中，欢迎大家在 [github issue](https://github.com/antvis/Graphin/issues/211) 上与我们一起交流想法
+
 ## 数据建模
 
+## 问题分析
+
+数据建模：传统的建模方式是通过填写表单来创建点边，这种方案存在的问题是建模效率低及无法直观地看清楚图模型的关联关系，如何提升建模效率及直观地展示图模型中的关系是我们需要重点解决的问题。
+
+## 解决方案：可视化建模
+
+通过可视化的方式来完成点边的创建，可以有效提升建模的效率，并让提高了模型的可读性。可视化建模方案主要包括图模型的创建、管理及交互三个方面。
+
+| 解决方案           | 技术方案                                                                          |
+| ------------------ | --------------------------------------------------------------------------------- |
+| 动态添加节点和边   | 数据驱动 `<Graphin data={{nodes:[...newNodes],edges:[...newEdges]}}/>`            |
+| 自动处理多边和自环 | 工具函数：`Graphin.Utils.processEdges(edges,{poly,loop})`                         |
+| 更新节点信息       | 样式数据驱动 `graph.updateItem('node',{style:{keyshape,halo,label,badges,icon}})` |
+| 更新边信息         | 样式数据驱动 `graph.updateItem('edge',{style:{keyshape,halo,label}})`             |
+| 布局保持稳定       | 布局数据驱动`<Graphin layout={{type:"preset"}}/>`                                 |
+| 辅助工具           | 工具栏`<Toolbar />` 右键菜单`<ContextMenu />`                                     |
+
+> 注意 ⚠️ ： 通过右键菜单可以选择需要建立的边，更多功能还在开发中...
+
 <code src='./index.tsx'>
diff --git a/packages/graphin/docs/case/graph-database/graph-schema/index.tsx b/packages/graphin/docs/case/graph-database/graph-schema/index.tsx
@@ -38,10 +38,11 @@ const SchemaBuilder = () => {
   const { data, layout } = state;
 
   const handleAddEdge = newEdge => {
+    const edges = Utils.processEdges([...data.edges, newEdge]);
     setState({
       data: {
         ...data,
-        edges: [...data.edges, newEdge],
+        edges,
       },
       layout: 'preset',
     });

diff --git a/packages/graphin/docs/case/graph-database/index.md b/packages/graphin/docs/case/graph-database/index.md
@@ -3,10 +3,30 @@ title: 解决方案
 group:
   path: /database
   title: 图数据库
+  order: 0
 nav:
   title: 领域方案
   path: /case
   order: 4
 ---
 
-<code src='./index.tsx'>
+```jsx
+/**
+ * inline: true
+ */
+import React from 'react';
+
+export default () => {
+  return (
+    <div style={{ height: 'calc(100vh - 170px)' }}>
+      <embed
+        title="visualization for graph database"
+        height="100%"
+        width="100%"
+        src="https://gw.alipayobjects.com/os/bmw-prod/a381a006-85e8-4c55-83b3-278a02f83535.pdf"
+        type="application/pdf"
+      />
+    </div>
+  );
+};
+```
diff --git a/...raphin/docs/geamaker/demos/CustomMenu.tsx → ...graph-database/large-graph/CustomMenu.tsx b/...raphin/docs/geamaker/demos/CustomMenu.tsx → ...graph-database/large-graph/CustomMenu.tsx
@@ -1,16 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import * as React from 'react';
 import { GraphinContext, Utils } from '@antv/graphin';
 import { ContextMenu } from '@antv/graphin-components';
 import { manageExpandCollapseArray, getMixedGraph, icons } from './utils';
 import { clusterColorMap } from './color';
-import { hexToRgbaToHex } from '../../../src/utils/hexToRgba';
 
 const { Menu } = ContextMenu;
 
 interface CustomMenuProps {
   updateState: any;
-  aggregatedNodeMap: {};
-  nodeMap: {};
+  aggregatedNodeMap: unknown;
+  nodeMap: unknown;
   state: any;
 }
 let collapseArray = [];
@@ -47,7 +47,8 @@ const CustomMenu: React.FunctionComponent<CustomMenuProps> = props => {
         node.type = 'graphin-circle';
         node.style = {
           keyshape: {
-            fill: hexToRgbaToHex(primaryColor, 0.1),
+            fill: primaryColor,
+            fillOpacity: 0.1,
             strokeWidth: 0.5,
             stroke: primaryColor,
             size: [NODE_SIZE, NODE_SIZE],
@@ -96,9 +97,7 @@ const CustomMenu: React.FunctionComponent<CustomMenuProps> = props => {
     handleClose();
   };
   const handleFind = () => {
-    const newData = Utils.mock(3)
-      .expand([model])
-      .graphin();
+    const newData = Utils.mock(3).expand([model]).graphin();
     updateState({
       ...state,
       data: {

diff --git a/...ages/graphin/docs/geamaker/demos/color.ts → .../case/graph-database/large-graph/color.ts b/...ages/graphin/docs/geamaker/demos/color.ts → .../case/graph-database/large-graph/color.ts
@@ -1,23 +1,3 @@
-import G6 from '@antv/g6';
-
-const darkBackColor = '#5F95FF';
-const disableColor = '#777';
-const theme = 'light';
-const subjectColors = [
-  '#5F95FF', // blue
-  '#61DDAA',
-  '#65789B',
-  '#F6BD16',
-  '#7262FD',
-  '#78D3F8',
-  '#9661BC',
-  '#F6903D',
-  '#008685',
-  '#F08BB4',
-];
-
-// const colorSets = G6.Util.getColorSetsBySubjectColors(subjectColors, darkBackColor, theme, disableColor);
-
 const colorSets = [
   {
     mainFill: '#5b8ff9',

diff --git a/packages/graphin/docs/case/graph-database/large-graph/index.md b/packages/graphin/docs/case/graph-database/large-graph/index.md
@@ -0,0 +1,32 @@
+---
+title: 大图探索
+group:
+  path: /database
+  title: 图数据库
+  order: 0
+nav:
+  title: 领域方案
+  path: /case
+  order: 4
+---
+
+> 注意 ⚠️ ： 该方案还在开发中，欢迎大家在 [github issue](https://github.com/antvis/Graphin/issues/211) 上与我们一起交流想法
+
+## 大图探索
+
+### 问题分析
+
+图数据库中原始的数据量往往非常大，这个查询出来的数据的可读性带来很大的挑战。除了服务层做数据筛选过滤，前端也可以通过一些聚类算法进行节点的聚合，再通过数据下钻的方式，下钻动态探索。
+
+### 解决方案
+
+| 解决方案               | 技术方案                                                         |
+| ---------------------- | ---------------------------------------------------------------- |
+| 节点聚合，前端算法     | louvain 算法聚合 `const { louvain } = G6.Algorithm`              |
+| 减少视觉干扰，看清细节 | 鱼眼放大镜 `<FishEye />`                                         |
+| 减少视觉干扰，看清全局 | 小地图导航 `<MiniMap/>`                                          |
+| 节点分类：颜色属性映射 | 图例组件 `<Legend />`                                            |
+| 下钻探索               | Graphin 渐进力导布局 `<Graphin layout={{type:"graphin-force"}}>` |
+
+<br />
+<code src='./index.tsx'>
diff --git a/...ges/graphin/docs/geamaker/demos/index.tsx → ...case/graph-database/large-graph/index.tsx b/...ges/graphin/docs/geamaker/demos/index.tsx → ...case/graph-database/large-graph/index.tsx
@@ -3,7 +3,6 @@ import Graphin, { Behaviors } from '@antv/graphin';
 import { ContextMenu, FishEye, MiniMap, Legend } from '@antv/graphin-components';
 import G6 from '@antv/g6';
 import { colorSets, clusterColorMap } from './color';
-import hexToRgba, { hexToRgbaToHex } from '../../../src/utils/hexToRgba';
 import { Switch } from 'antd';
 
 import CustomMenu from './CustomMenu';
@@ -54,17 +53,20 @@ const transClusterData = (data, sourceData) => {
       type: 'graphin-circle',
       style: {
         keyshape: {
-          fill: hexToRgbaToHex(primaryColor, 0.1), // '#fff',
+          fill: primaryColor, // '#fff',
+          fillOpacity: 0.1,
           strokeWidth: 1.2,
           stroke: primaryColor,
           size: [nodeSize, nodeSize],
         },
         label: {
           value: `cluster-${node.id}(${node.nodes.length})`,
-          fill: hexToRgbaToHex('#000', 0.85),
+          fill: '#000',
+          fillOpacity: 0.85,
         },
         halo: {
-          fill: hexToRgbaToHex(primaryColor, 0.1), // '#fff',
+          fill: primaryColor, // '#fff',
+          fillOpacity: 0.1,
           strokeWidth: 1.2,
           stroke: primaryColor,
         },
@@ -133,6 +135,7 @@ const App = () => {
     layout: { ...defaultLayout, animation: true },
   });
   React.useEffect(() => {
+    // eslint-disable-next-line no-undef
     fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
       .then(res => res.json())
       .then(res => {
@@ -176,9 +179,6 @@ const App = () => {
       };
     });
   };
-  // if (!data) {
-  //   return null;
-  // }
   const handleChangeAnimate = checked => {
     console.log('checked', checked);
     setState(preState => {
@@ -206,7 +206,7 @@ const App = () => {
         </div>
         <ZoomCanvas enableOptimize />
         <DragNode />
-        <MiniMap />
+        <MiniMap visible />
         <ContextMenu>
           <CustomMenu state={state} updateState={setState} nodeMap={nodeMap} aggregatedNodeMap={aggregatedNodeMap} />
         </ContextMenu>

diff --git a/...ages/graphin/docs/geamaker/demos/utils.ts → .../case/graph-database/large-graph/utils.ts b/...ages/graphin/docs/geamaker/demos/utils.ts → .../case/graph-database/large-graph/utils.ts
@@ -22,7 +22,7 @@ export const getMixedGraph = (aggregatedData, originData, nodeMap, aggregatedNod
     collapseMap[collapseModel.id] = true;
   });
 
-  aggregatedData.clusters.forEach((cluster, i) => {
+  aggregatedData.clusters.forEach(cluster => {
     if (expandMap[cluster.id]) {
       nodes = nodes.concat(cluster.nodes);
       aggregatedNodeMap[cluster.id].expanded = true;