如何在ngx-graph中获取被点击节点的ID？

问题原因 #

你当前仅将DOM点击事件$event传入onNodeClick方法，这个事件对象仅包含浏览器鼠标事件的基础信息，不会携带ngx-graph的节点业务数据。而节点的ID、标签等信息，实际存在模板中通过let-node暴露的node变量里。

解决步骤 #

1. 修改模板中的点击事件 #

在节点模板的svg:g元素上，将node变量也传递给点击处理方法：

<svg:g
    (click)="onNodeClick($event, node)"
    class="node"
>

2. 更新组件中的点击处理逻辑 #

在component.component.ts里，修改onNodeClick方法，接收第二个参数node，直接访问其id属性即可获取目标值：

onNodeClick($event, node) {
    console.log('点击的节点ID:', node.id);
    // 如需查看完整节点数据，可直接打印node
    console.log('完整节点信息:', node);
}

完整修改后的代码示例 #

component.component.html #

<ngx-graph
    class="chart-container"
    [view]="[800, 800]"
    [links]="[]"
    [nodes]="[
        {
            id: 'site-access',
            label: 'Site Access'
        }
    ]"
    [clusters]="[]"
    layout="dagreCluster"
>
    <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
            (click)="onNodeClick($event, node)"
            class="node"
        >
            <svg:rect
                [attr.width]="node.dimension.width"
                [attr.height]="node.dimension.height"
                [attr.fill]="node.data.color"
            />
            <svg:text
                alignment-baseline="central"
                [attr.x]="10"
                [attr.y]="node.dimension.height / 2"
            >
                {{ node.label }}
            </svg:text>
        </svg:g>
    </ng-template>

</ngx-graph>

component.component.ts #

import { Component, OnInit } from '@angular/core';
import * as shape from 'd3-shape';

@Component({
    selector: 'component',
    templateUrl: './component.component.html',
    styleUrls: ['./component.component.less'],
})
export class ComponentComponent implements OnInit {
    constructor() {}

    onNodeClick($event, node) {
        console.log('点击的节点ID:', node.id);
        console.log('完整节点信息:', node);
    }

    ngOnInit(): void {}
}

额外说明 #

如果不需要处理DOM事件（比如无需阻止冒泡、获取鼠标坐标等），可以直接仅传递node参数：

(click)="onNodeClick(node)"

对应的组件方法简化为：

onNodeClick(node) {
    console.log('点击的节点ID:', node.id);
}

内容的提问来源于stack exchange，提问作者Izin