Я пытаюсь использовать ElkJS, чтобы вычислить макет для семейного древа и получить довольно приличные результаты. Однако я не могу заставить работать пересечения в стиле T.
Рассмотрим семью с 2 родителями (P1, P2
) и 3 детьми (P3, P4, P5
). Я добавил поддельный узел R1
размером 1x1, к которому подключены все остальные узлы, и это ELK JSON, который я использую:
{
"id": "root",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.edgeRouting": "ORTHOGONAL",
"elk.layered.mergeEdges": true
},
"children": [
{
"id": "P1",
"width": 100,
"height": 50,
"layoutOptions": { "elk.portConstraints": "FIXED_SIDE" },
"ports": [
{ "id": "P1:e", "layoutOptions": { "elk.port.side": "EAST" } },
{ "id": "P1:w", "layoutOptions": { "elk.port.side": "WEST" } }
]
},
{
"id": "P2",
"width": 100,
"height": 50,
"layoutOptions": { "elk.portConstraints": "FIXED_SIDE" },
"ports": [
{ "id": "P2:e", "layoutOptions": { "elk.port.side": "EAST" } },
{ "id": "P2:w", "layoutOptions": { "elk.port.side": "WEST" } }
]
},
{
"id": "P3",
"width": 100,
"height": 50,
"layoutOptions": { "elk.portConstraints": "FIXED_SIDE" },
"ports": [
{ "id": "P3:n", "layoutOptions": { "elk.port.side": "NORTH" } }
]
},
{
"id": "P4",
"width": 100,
"height": 50,
"layoutOptions": { "elk.portConstraints": "FIXED_SIDE" },
"ports": [
{ "id": "P4:n", "layoutOptions": { "elk.port.side": "NORTH" } }
]
},
{
"id": "P5",
"width": 100,
"height": 50,
"layoutOptions": { "elk.portConstraints": "FIXED_SIDE" },
"ports": [
{ "id": "P5:n", "layoutOptions": { "elk.port.side": "NORTH" } }
]
},
{
"id": "R1",
"width": 1,
"height": 1,
"layoutOptions": { "elk.portConstraints": "FIXED_SIDE" },
"ports": [
{ "id": "R1:n", "layoutOptions": { "elk.port.side": "NORTH" } },
{ "id": "R1:s", "layoutOptions": { "elk.port.side": "SOUTH" } }
]
}
],
"edges": [
{ "id": "E1", "sources": [ "P1:e" ], "targets": [ "R1:n" ] },
{ "id": "E2", "sources": [ "P2:w" ], "targets": [ "R1:n" ] },
{ "id": "E3", "sources": [ "R1:s" ], "targets": [ "P3:n" ] },
{ "id": "E4", "sources": [ "R1:s" ], "targets": [ "P4:n" ] },
{ "id": "E5", "sources": [ "R1:s" ], "targets": [ "P5:n" ] }
]
}
Ожидаемый результат:
Фактический результат:
Я реализую приложение, которое рисует произвольные деревья из пользовательского ввода. Поэтому лучшее решение не должно полагаться на явную спецификацию стороны порта.
Можно ли это исправить?
P. S. Полезная ссылка на визуализатор для игры с JSON: https://rtsys.informatik.uni -kiel.de / elklive / json.html