Изменить внешний вид курсора при наведении узла

Question

Я использую библиотеку ngx-graph в Angular 7 для отображения графика иерархии. Моя установка выглядит следующим образом:

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

Я попытался поместить что-то между let-узлом кода ngx-graphs, используя ng-контейнер, чтобы не нарушать иерархию шаблонов, и обтекать стиль атрибутом курсора вокруг svg, но это не помогло.

Какой будет альтернатива? Я вообще не смог найти ничего, связанного с проблемой, документация по ngx-графам кажется неполной и странной.

Answer 1

Это можно сделать в CSS. В этом примере курсор изменится на указатель при наведении курсора на узел.

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