Как ввести параметры в DagreClusterLayout в ngx-графе?

Question

Я хотел бы переместить метку в узле кластера на вершину вместо центра. Хотя я мог создать свой собственный макет, казалось, что в 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>

в предположении мне нужно было бы создать новый объект для изменения настроек.

В заголовке моего файла TypeScript у меня есть:

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

и тело у меня есть

    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>