Как ввести параметры в DagreClusterLayout в ngx-графе? - PullRequest
Новая
       22

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

0 голосов
/ 24 июня 2019

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

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

1 Ответ

0 голосов
/ 26 июня 2019

Я делал вещи слишком сложными, ожидая, что мне нужно попасть внутрь объекта макета. Но 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>
...