Как прагматично вызвать Center и Fit In View на ngx-graph

В этой демо-версии ngx-graph в разделе "Параметры" есть кнопки "Центр", Fit In View и т. д. Я хотел бы реализовать их в своем решении. Однако я не могу найти никакой документации о том, как делать эти вызовы, а в демоверсии нет исходного кода.

В этом справочном документе указан center$ и zoomToFit$ observables, но до сих пор мне не удалось успешно подписаться на них или активировать их. Когда я проверяю с помощью инструментов chrome dev, кажется, что эти элементы не существуют в проверяемом объекте.

Учитывая следующую (упрощенную) настройку графика, как я могу подключить обработчик (щелчка) кнопки вверху, чтобы вызвать функцию Center?

<button (click)="myGraph.xxxxxx?">Center</button>

<ngx-graph
  #myGraph
  [links]="links"
  [nodes]="nodes"
  [curve]="curve">

  <ng-template #defsTemplate>
    <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
      <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
    </svg:marker>
  </ng-template>

  <ng-template #nodeTemplate let-node>
    <svg:g>
      <svg:rect [attr.width]="node.width" [attr.height]="node.height" [attr.fill]="node.options.color" />
      <svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.height / 2">{{node.label}}</svg:text>
    </svg:g>
  </ng-template>

  <ng-template #linkTemplate let-link>
    <svg:g class="edge">
      <svg:path>
      </svg:path>
        <svg:text class="edge-label" text-anchor="middle" style="fill: #000000;font-size: 13px">
          <textPath class="text-path" [attr.href]="'#' + link.id" [style.dominant-baseline]="link.dominantBaseline" startOffset="50%">
            {{link.label}}
        </textPath>
      </svg:text>
    </svg:g>
  </ng-template>

</ngx-graph>

angular ngx-graph ngx-charts
person Martyn    schedule 06.03.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я считаю, что они доступны только в версии 6 компонента (Ссылка NPM), поэтому сначала обновите ее. Затем вы можете сделать:

<button (click)="myGraph.zoomToFit() && myGraph.center()">Center</button>

Не уверен, что наблюдаемые работают (сам не проверял), но вы бы использовали их примерно так:

<ngx-graph [center$]="center$"></ngx-graph>

class MyComponent {
  center$ = new Subject<any>();
  doCenter() {
    // trigger center
    this.center$.next();
  }
}
person Bogdan Kiselitsa    schedule 12.03.2019
comment
Спасибо. Для тех, кто придет к этому позже, пример кода для живой демонстрации можно найти на github в ветке 5.x ссылка. Да, наблюдаемый синтаксис привязки работает, однако я использовал ngx-graph версии 4.0, а необходимые мне члены не были представлены до версии 4.3. Обновление до 4.3 решило мою проблему. - person Martyn; 12.03.2019