请改进一下dagre布局的算法

[silentmissile]

这里有一段样例代码，可以嵌入任何一个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);
`

[jiangyu]

同问，有什么进展么