Question

我使用Angular 7中的ngx-graph库显示层次结构图。我的设置如下所示：

<ngx-graph *ngIf="(tree$ | async) as tree" style="width: 100%; height: 100%; display: grid"
           [links]="tree.links"
           [nodes]="tree.nodes"
           [curve]="curve"
           [draggingEnabled]="false"
           [panningEnabled]="panningEnabled"
           [enableZoom]="zoomEnabled"
           [zoomSpeed]="zoomSpeed"
           [minZoomLevel]="minZoomLevel"
           [maxZoomLevel]="maxZoomLevel"
           [panOnZoom]="panOnZoom"
           [orientation]="orientation"
           [autoZoom]="autoZoom"
           [autoCenter]="true"
           [update$]="update$"
           [center$]="center$"
           [zoomToFit$]="zoomToFit$"
           (select)="selected($event)" xmlns:svg="http://www.w3.org/1999/XSL/Transform">
  <ng-template #nodeTemplate let-node>
    <ng-container style="cursor: pointer">
    <svg:g class="node">
      <svg:circle [attr.r]="node.width/2" [attr.cx]="node.width/2" [attr.cy]="node.width/2" [attr.fill]="node.color || node.options.color" />
      <svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.height / 2">{{node.label}}</svg:text>
    </svg:g>
    </ng-container>
  </ng-template>
</ngx-graph>

我试图在ngx-graphs代码的let节点之间放置一些内容，使用ng容器不破坏模板层次结构，并在svg周围包装带有cursor属性的样式，但这没有帮助。

那是什么呢？我根本找不到与该问题有关的任何东西，ngx-graphs的文档似乎并不完整且陌生。

Answer 1

这可以在CSS中完成。此示例将鼠标悬停在节点上时会将光标更改为指针。

g.node rect,text {
  cursor: pointer;
}

更改节点悬停时的光标外观

1 个答案: