[Feat]: 节点移入高亮

[xiaozhuzhr]

Describe the feature / 功能描述

我想要鼠标移入元素，对应元素边框变红

Are you willing to contribute? / 是否愿意参与贡献？

✅ Yes / 是

[github-actions[bot]]

@xiaozhuzhr 您好！以下是关于您问题的自动回复：

您好，感谢您的建议和愿意贡献！

您提出的“鼠标移入节点时边框高亮变红”功能，可以通过 G6 的交互行为和节点状态样式实现。下面是实现思路及代码示例：

---

实现思路

1. 配置节点的 hover 状态样式，设置描边（stroke）颜色为红色。
2. 添加 hover-activate 行为，使节点在鼠标移入时自动进入 hover 状态。

---

示例代码

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container', // 容器 id
  width: 600,
  height: 400,
  data: {
    nodes: [
      { id: 'node1', style: { x: 100, y: 100 }, data: { label: '节点1' } },
      { id: 'node2', style: { x: 300, y: 100 }, data: { label: '节点2' } },
    ],
  },
  node: {
    type: 'circle', // 也可以根据实际需求调整
    style: {
      fill: '#e6f7ff',
      stroke: '#91d5ff',
      lineWidth: 2,
      r: 30,
      labelText: (d) => d.data.label,
    },
    state: {
      hover: {
        stroke: '#f5222d', // 鼠标移入时边框变红
        lineWidth: 3,
      },
    },
  },
  behaviors: [
    {
      type: 'hover-activate',
      enable: e => e.targetType === 'node', // 仅节点响应 hover
    },
  ],
});

graph.render();

---

说明

• node.state.hover 定义了鼠标移入节点时的样式（如红色描边）。
• hover-activate 行为自动处理鼠标移入/移出节点的状态切换，无需手动监听事件。
• 可根据实际需求调整节点类型、大小、样式等。

---

参考资料

• G6 节点状态样式官方文档
• G6 hover-activate 行为

---

如需进一步定制或有其他问题，欢迎继续交流！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。