1

我正在尝试在我的项目中使用 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'
}
];

我得到的输出是:

在此处输入图像描述

预期输出为:

在此处输入图像描述

任何帮助或建议将不胜感激谢谢。

4

1 回答 1

1

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

于 2020-03-24T06:40:33.160 回答