推荐系统初始化

web/src/components/graph/config.js

@@ -0,0 +1,81 @@
+export function config(param) {
+    return {
+        container: param.id, // 指定图画布的容器id
+        // 画布宽高
+        width: param.width,
+        height: param.height,
+        layout: {
+            type: 'force',
+            nodeStrength: -0,
+            nodeSize: 80,
+            preventOverlap: true,
+            edgeStrength: 0.1
+        },
+        // layout: {
+        //     type: 'fruchterman',
+        //     gravity: 10, // 重力大小，影响紧凑性, 默认10
+        //     speed: 5, // 每次迭代节点移动的速度。速度太快可能会导致强烈震荡,默认1
+        //     workerEnabled: true, // 是否启用 web-worker 以防布局计算时间过长阻塞页面交互, 默认false
+        // },
+        modes: {
+            // Defualt mode
+            default: ['drag-node',
+                {
+                    type: 'drag-canvas',
+                    enableOptimize: true, // enable the optimize to hide the shapes beside nodes' keyShape
+                },
+                {
+                    type: 'zoom-canvas',
+                    enableOptimize: true, // enable the optimize to hide the shapes beside nodes' keyShape
+                },
+                {
+                    type: 'create-edge',
+                    key: 'shift', // undefined by default, options: 'shift', 'control', 'ctrl', 'meta', 'alt'
+                },
+            ],
+            addEdge: ['click-add-edge'],
+        },
+        // plugins: [contextMenu], //minimap
+        defaultNode: {
+            size: 25,
+            color: '#4b4b4b',
+            label: 'name',
+            style: {
+                fill: '#68BDF6'
+            },
+            labelCfg: {
+                position: 'bottom',
+                style: {
+                    fontSize: 14,
+                    fill: '#4b4b4b'
+                }
+            }
+        },
+        defaultEdge: {
+            style: {
+                stroke: '#B3B3B3',
+                lineAppendWidth: 10, // Enlarge the range the edge to be hitted
+            },
+            labelCfg: {
+                autoRotate: false,
+                style: {
+                    fontSize: 13,
+                    fill: '#989898'
+                }
+            },
+        },
+        nodeStateStyles: {
+            yourStateName: {
+                stroke: '#f00',
+                lineWidth: 3,
+            },
+        },
+        edgeStateStyles: {
+            yourStateName: {
+                stroke: '#f00',
+                lineWidth: 3,
+            },
+        },
+    };
+}
+