layout
layout copied to clipboard
请改进一下dagre布局的算法
这里有一段样例代码,可以嵌入任何一个html的dvi中,我用的是1000px*900px的画幅,可以直接重现这个问题
最后的两个node的的分布明显不合理,两个edge出现了容易让人误解的相交,其实本可以不相交的。
` import { Graph, Node, Edge } from "@antv/x6"; import { DagreLayout, Model as layoutModel } from "@antv/layout"; // the Model class in @antv/layout conflict the Model class in @antv/x6 const layoutData: layoutModel = { "nodes": [ { "id": "1", "shape": "rect", "width": 100, "height": 40, "attrs": { "body": { "fill": "#1E90FF", "stroke": "#FF4500" }, "label": { "text": "start", "fill": "#000000", "fontSize": 13 } }, "x": 35, "y": 55, "_order": 0 }, { "id": "3", "shape": "rect", "width": 100, "height": 40, "attrs": { "body": { "fill": "#FFFF00", "stroke": "#87CEFA" }, "label": { "text": "hr_review", "fill": "#000000", "fontSize": 13 } }, "x": 140, "y": 635, "_order": 1 }, { "id": "2", "shape": "rect", "width": 100, "height": 40, "attrs": { "body": { "fill": "#00FF00", "stroke": "#FF4500" }, "label": { "text": "first_review", "fill": "#000000", "fontSize": 13 } }, "x": 35, "y": 200, "_order": 0 }, { "id": "4", "shape": "rect", "width": 100, "height": 40, "attrs": { "body": { "fill": "#00FF00", "stroke": "#FF4500" }, "label": { "text": "engineer_manager_review", "fill": "#000000", "fontSize": 13 } }, "x": 35, "y": 490, "_order": 0 }, { "id": "5", "shape": "rect", "width": 100, "height": 40, "attrs": { "body": { "fill": "#FFFF00", "stroke": "#FF4500" }, "label": { "text": "engineering_director_review", "fill": "#000000", "fontSize": 13 } }, "x": 35, "y": 635, "_order": 0 }, { "id": "6", "shape": "rect", "width": 100, "height": 40, "attrs": { "body": { "fill": "#FFFFFF", "stroke": "#FF4500" }, "label": { "text": "sales_review", "fill": "#000000", "fontSize": 13 } }, "x": 120, "y": 345, "_order": 1 }, { "id": "7", "shape": "rect", "width": 100, "height": 40, "attrs": { "body": { "fill": "#FFFFFF", "stroke": "#FF4500" }, "label": { "text": "finance_review", "fill": "#000000", "fontSize": 13 } }, "x": 120, "y": 490, "_order": 1 } ], "edges": [ { "source": "1", "target": "2", "router": { "name": "metro", "args": { "padding": 1, "startDirections": [ "bottom" ], "endDirections": [ "top" ] } }, "connector": { "name": "rounded", "args": { "radius": 8 } }, "anchor": "center", "connectionPoint": "anchor", "allowBlank": false, "snap": { "radius": 20 }, "attrs": { "line": { "stroke": "#1890ff", "strokeDasharray": 10, "targetMarker": "classic", "style": { "animation": "ant-line 30s infinite linear" } } }, "shape": "edge" }, { "source": "2", "target": "4", "router": { "name": "metro", "args": { "padding": 1, "startDirections": [ "bottom" ], "endDirections": [ "top" ] } }, "connector": { "name": "rounded", "args": { "radius": 8 } }, "anchor": "center", "connectionPoint": "anchor", "allowBlank": false, "snap": { "radius": 20 }, "attrs": { "line": { "stroke": "#1890ff", "strokeDasharray": 10, "targetMarker": "classic", "style": { "animation": "ant-line 30s infinite linear" } } }, "shape": "edge" }, { "source": "2", "target": "6", "router": { "name": "metro", "args": { "padding": 1, "startDirections": [ "bottom" ], "endDirections": [ "top" ] } }, "connector": { "name": "rounded", "args": { "radius": 8 } }, "anchor": "center", "connectionPoint": "anchor", "allowBlank": false, "snap": { "radius": 20 }, "attrs": { "line": { "stroke": "#1890ff", "strokeDasharray": 10, "targetMarker": "classic", "style": { "animation": "ant-line 30s infinite linear" } } }, "shape": "edge" }, { "source": "4", "target": "5", "router": { "name": "metro", "args": { "padding": 1, "startDirections": [ "bottom" ], "endDirections": [ "top" ] } }, "connector": { "name": "rounded", "args": { "radius": 8 } }, "anchor": "center", "connectionPoint": "anchor", "allowBlank": false, "snap": { "radius": 20 }, "attrs": { "line": { "stroke": "#1890ff", "strokeDasharray": 10, "targetMarker": "classic", "style": { "animation": "ant-line 30s infinite linear" } } }, "shape": "edge" }, { "source": "4", "target": "3", "router": { "name": "metro", "args": { "padding": 1, "startDirections": [ "bottom" ], "endDirections": [ "top" ] } }, "connector": { "name": "rounded", "args": { "radius": 8 } }, "anchor": "center", "connectionPoint": "anchor", "allowBlank": false, "snap": { "radius": 20 }, "attrs": { "line": { "stroke": "#1890ff", "strokeDasharray": 10, "targetMarker": "classic", "style": { "animation": "ant-line 30s infinite linear" } } }, "shape": "edge" }, { "source": "6", "target": "7", "router": { "name": "metro", "args": { "padding": 1, "startDirections": [ "bottom" ], "endDirections": [ "top" ] } }, "connector": { "name": "rounded", "args": { "radius": 8 } }, "anchor": "center", "connectionPoint": "anchor", "allowBlank": false, "snap": { "radius": 20 }, "attrs": { "line": { "stroke": "#1890ff", "strokeDasharray": 10, "targetMarker": "classic", "style": { "animation": "ant-line 30s infinite linear" } } }, "shape": "edge" }, { "source": "7", "target": "5", "router": { "name": "metro", "args": { "padding": 1, "startDirections": [ "bottom" ], "endDirections": [ "top" ] } }, "connector": { "name": "rounded", "args": { "radius": 8 } }, "anchor": "center", "connectionPoint": "anchor", "allowBlank": false, "snap": { "radius": 20 }, "attrs": { "line": { "stroke": "#1890ff", "strokeDasharray": 10, "targetMarker": "classic", "style": { "animation": "ant-line 30s infinite linear" } } }, "shape": "edge" } ] }
const dagreLayout = new DagreLayout({ type: "dagre", rankdir: "TB", align: "UL", ranksep: 35, nodesep: 15, }); const dagreModel = dagreLayout.layout(layoutData); graph = new Graph({ container: document.getElementById('container')!, panning: { enabled: true, eventTypes: ["leftMouseDown"], }, }); graph.fromJSON(dagreModel); `
同问,有什么进展么