[Feat]: 节点移入高亮 #7562
Unanswered
xiaozhuzhr
asked this question in
Q&A
[Feat]: 节点移入高亮
#7562
Replies: 1 comment
-
|
@xiaozhuzhr 您好!以下是关于您问题的自动回复: 您好,感谢您的建议和愿意贡献! 您提出的“鼠标移入节点时边框高亮变红”功能,可以通过 G6 的交互行为和节点状态样式实现。下面是实现思路及代码示例: 实现思路
示例代码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();说明
参考资料如需进一步定制或有其他问题,欢迎继续交流! 此回复由 AI 助手自动生成。如有任何问题,我们的团队会尽快跟进。 |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Describe the feature / 功能描述
我想要鼠标移入元素,对应元素边框变红
Are you willing to contribute? / 是否愿意参与贡献?
✅ Yes / 是
Beta Was this translation helpful? Give feedback.
All reactions