在 ngx-graph 链接布局方面需要帮助

Question

我正在尝试在我的项目中使用 ngx-graph 来绘制层次图。我对连接两个节点的链接有疑问。我已经尝试了所有的曲线类型，但没有得到预期的结果。

下面是一些代码片段：

HTML

[links]="links"
[nodes]="nodes"
[layoutSettings]="layoutSettings"
[curve]="curve"
[draggingEnabled]="false"
[panningEnabled]="true"
[enableZoom]="false"
[autoZoom]="true"
[autoCenter]="false"

<ng-template #nodeTemplate let-node>
<svg:g class="node">
<svg:rect [attr.width]="100" [attr.height]="50" fill ="#fff" stroke-width ="1" stroke = "#000" />
<svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">{{node.label}}</svg:text>
</svg:g>
</ng-template>
</ngx-graph>

TS


layoutSettings = {
orientation: 'TB'
};

nodes: Node[] = [
{
id: 'first',
label: 'Parent'
}, {
id: 'c1',
label: 'Child 1'
}, {
id: 'c2',
label: 'Child 2'
}, {
id: 'c3',
label: 'Child 3'
}
];

links: Edge[] = [
{
id: 'a',
source: 'first',
target: 'c1',
label: 'is parent of'
}, {
id: 'b',
source: 'first',
target: 'c2',
label: 'custom label'
}, {
id: 'c',
source: 'first',
target: 'c3',
label: 'custom label'
}
];

我得到的输出是：

预期输出为：

如有任何帮助或建议，我们将不胜感激。谢谢。

Answer 1

我找到了我自己问题的答案。这可以通过自定义布局来实现。 Here 你可以找到一个自定义布局，它解决了我的问题。

在 ngx-graph 链接布局方面需要帮助

Need help in ngx-graph links layout

d3.js

ngx-graph

angular8