如何在Antv/G6中的边缘盘旋？
如何在Antv/G6中的边缘盘旋？
提问于 2021-07-07 16:29:22
我正在学习使用antv/G6进行网络可视化。我在正常工作的节点上悬停(节点是钢蓝色的，在悬停时变为红色)。然而，边缘是不正常的工作。当鼠标进入其形状时，边缘会改变颜色。但是，鼠标离开后，颜色不会返回到默认状态。我创建了一个具有四个节点和两个边的MWE。任何帮助都是非常感谢的。谢谢。代码遵循并且是独立的.我通常使用Chrome、Firefox和Safari运行http-server，并在带有BigSur操作系统OS11.4的Macbook Pro上获得类似的行为。
Gordonindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>01. Quick trial</title>
</head>
<body>
<div id="mountNode"></div>
<script
defer
src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"
></script>
<script type="module" src="index.js"></script>
</body>
</html>index.js
function convertData() {
const nodes = [{ id: "1" }, { id: "2" }, { id: "3" }, { id: "4" }];
const edges = [
{ source: "1", target: "2" },
{ source: "3", target: "4" },
];
const new_data = {
nodes: nodes,
edges: edges,
};
return new_data;
}
const setupConfiguration = () => {
const graph = new G6.Graph({
defaultNode: {
size: 50,
// selection of rects works. Circles have a halo around them. WHY?
type: "rect",
style: {
fill: "steelBlue",
stroke: "#666",
lineWidth: 0.2,
},
labelCfg: {
style: {
fill: "#fff",
}
}
},
defaultEdge: {
type: "line",
style: {
stroke: "orange",
lineWidth: 25,
},
},
labelCfg: {
autoRotate: true,
},
nodeStateStyles: {
hover: {
fill: "red",
},
},
edgeStateStyles: {
hover: {
stroke: "blue",
lineWidth: 5,
},
},
container: "mountNode",
width: 800,
height: 500,
autofit: true,
fitView: true,
});
return graph;
};
const graph = setupConfiguration();
// Mouse enter a node
graph.on("node:mouseenter", (e) => {
const nodeItem = e.item; // Get the target item
graph.setItemState(nodeItem, "hover", true);
});
// Mouse exit a node
graph.on("node:mouseleave", (e) => {
const nodeItem = e.item; // Get the target item
graph.setItemState(nodeItem, "hover", false);
});
// Mouse enter an edge
graph.on("edge:mouseenter", (e) => {
const edgeItem = e.item;
graph.setItemState(edgeItem, "hover", true);
});
// Mouse exit an edge
graph.on("node:mouseleave", (e) => {
const edgeItem = e.item;
graph.setItemState(edgeItem, "hover", false);
});
// Render
const data = convertData();
graph.data(data);
graph.render();回答 1
Stack Overflow用户
发布于 2021-07-08 20:41:18
我发现了我的代码存在的问题:拼写error.This代码片段：
// Mouse exit an edge
graph.on("node:mouseleave", (e) => {
const edgeItem = e.item;
graph.setItemState(edgeItem, "hover", false);
});应该写成：
// Mouse exit an edge
graph.on("edge:mouseleave", (e) => {
const edgeItem = e.item;
graph.setItemState(edgeItem, "hover", false);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68289795
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号