0

在这个 ngx-graph 现场演示中，在 Options 部分下，有 Center、Fit In View 等按钮。我想在我的解决方案中实现这些。但是，我找不到任何有关如何进行这些调用的文档，并且该演示没有提供其源代码。

在此参考文档中，它列出了 center$ 和 zoomToFit$ observables，但到目前为止，我一直无法成功订阅或触发这些。当我使用 chrome 开发工具进行检查时，检查对象上似乎不存在这些元素。

给定以下（简化的）图形设置，如何连接顶部按钮的（单击）处理程序以触发 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>
4

1 回答 1

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();
  }
}
于 2019-03-12T05:14:50.947 回答