如何将设置注入 ngx-graph 中的 DagreClusterLayout？

Question

我想将集群节点中的标签移到顶部而不是中心。虽然我可以创建自己的自定义布局，但当我查看 the code

时，DagreClusterLayout 中似乎有一些选项可能会为我执行此操作

我不知道你会如何从 HTML 做到这一点。所以我开始：

    <ngx-graph class="chart-container" [view]="[800,800]" [links]="links" [nodes]="nodes" [clusters]="clusters" layout="dagreCluster"></ngx-graph>

并将其更改为

    <ngx-graph class="chart-container" [view]="[800,800]" [links]="links" [nodes]="nodes" [clusters]="clusters" [layout]="layout"></ngx-graph>

假设我需要创建一个新的 object 来更改设置。

在我的组件 TypeScript 文件的 header 中，我有：

import { DagreClusterLayout } from '@swimlane/ngx-graph/lib/graph/layouts/dagreCluster';
import { Alignment } from '@swimlane/ngx-graph/lib/graph/layouts/dagre';

和 body 我有

    let layout : DagreClusterLayout = new DagreClusterLayout();
    layout.settings = layout.defaultSettings;
    layout.settings.align = Alignment.UP_LEFT;
    this.layout = layout;

但是，我没有正确导入，因为出现错误：

ERROR in ./src/app/my/my.component.ts
Module not found: Error: Can't resolve '@swimlane/ngx-graph/lib/graph/layouts/dagre' in '(path)\src\app\my'
ERROR in ./src/app/my/my.component.ts
Module not found: Error: Can't resolve '@swimlane/ngx-graph/lib/graph/layouts/dagreCluster' in '(path)\src\app\my'

即使我尝试更改设置不会达到预期的结果，我也很想知道如何更改设置。

Answer 1

我把事情搞得太复杂了，我预计我需要进入布局对象。但是 ngx-graph 使用 layoutSettings 为我做了这个。

    <ngx-graph class="chart-container" [view]="[800,800]" [links]="links" [nodes]="nodes" [clusters]="clusters" layout="dagreCluster" [layoutSettings]="{
    orientation: 'LR',
    marginX: 5,
    marginY: 5,
    edgePadding: 100,
    rankPadding: 20,
    nodePadding: 5,
    multigraph: true,
    compound: true,
    align: 'UL'
  }"></ngx-graph>

如何将设置注入 ngx-graph 中的 DagreClusterLayout？

How do I inject settings into a DagreClusterLayout in ngx-graph?

angular

ngx-graph