节点悬停时线条高亮

演示当鼠标悬停在节点上时如何高亮连接到该节点的线条，以便在复杂图中进行集中探索。

节点悬停时线条高亮

功能概述

此示例演示了当鼠标悬停在节点上时如何高亮连接到该节点的线条。这是在复杂图中集中注意力于相关连接的常见交互模式。

核心特性实现

1. 节点悬停事件处理

在节点槽中实现 onMouseEnter 和 onMouseLeave 处理程序：

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => (
        <div
            onMouseEnter={() => nodeMouseOver(node)}
            onMouseLeave={() => nodeMouseOut(node)}
        >
            {node.text}
        </div>
    )}
</RGSlotOnNode>

2. 高亮连接的线条

悬停节点时，更新所有连接的线条：

const nodeMouseOver = (currentNode: RGNode) => {
    clearHighlightStatus();
    graphInstance.updateNode(currentNode, { className: 'my-node-highlight' });

    graphInstance.getLines().forEach(line => {
        if (line.from === currentNode.id || line.to === currentNode.id) {
            graphInstance.updateLine(line, {
                className: 'my-line-highlight',
                lineWidth: 3
            });
        }
    });
};

3. 清除高亮状态

将所有节点和线条重置为其默认状态：

const clearHighlightStatus = () => {
    graphInstance.getNodes().forEach(node => {
        graphInstance.updateNode(node, { className: '' });
    });
    graphInstance.getLines().forEach(line => {
        graphInstance.updateLine(line, {
            className: '',
            lineWidth: graphOptions.defaultLineWidth
        });
    });
};

4. CSS 样式

在 CSS 中定义高亮样式：

.my-node-highlight {
    background-color: #ffd700 !important;
}
.my-line-highlight {
    stroke: #ff6b6b !important;
    stroke-width: 3px !important;
}

创意使用场景

• 网络分析：聚焦于特定节点及其连接
• 社交网络：突出显示一个人的关系
• 依赖关系图：显示特定组件的所有依赖项
• 知识图谱：探索概念周围的连接
• 组织架构图：突出显示汇报线
• 基础设施地图：聚焦于与特定位置的连接