如何在 ngx-graph 上实用地调用 Center 和 Fit In View

Question

在 this ngx-graph live demo 中，在“选项”部分下，有“居中”、“适合视图”等按钮。我想在我的解决方案中实现这些按钮。但是，我找不到任何关于如何进行这些调用的文档，并且演示没有提供其来源。

在 this reference doc 它列出了 center$ 和 zoomToFit$ observables，但到目前为止我无法成功订阅或触发它们。当我使用 chrome 开发工具检查时，这些元素似乎不存在于被检查的对象上。

鉴于以下（简化的）图形设置，我如何连接顶部按钮的（单击）处理程序以触发中心功能？

<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>

Answer 1

我相信这些仅在组件的版本 6 (NPM Link) 中公开，因此请先升级到该版本。然后你可以这样做：

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

不确定 observables 是否有效（我自己没有测试过），但你会像这样使用它们：

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

class MyComponent {
  center$ = new Subject<any>();
  doCenter() {
    // trigger center
    this.center$.next();
  }
}

如何在 ngx-graph 上实用地调用 Center 和 Fit In View

How to call Center and Fit In View pragmatically on ngx-graph

angular

ngx-charts

ngx-graph