我正在学习使用antv/G6进行网络可视化。我已经将鼠标悬停在正常工作的节点上(节点为钢蓝色，悬停时变为红色。(但是，悬停在边上无法正常工作。鼠标进入边的形状时，边的颜色会发生变化。但是，鼠标离开后，颜色不会返回默认值。我已经创建了一个具有四个节点和两条边的MWE。非常感谢您的帮助。谢谢代码遵循并自包含。我通常在装有BigSur、OS11.4的Macbook Pro上运行http-server，并在Chrome、Firefox和Safari中获得类似的行为
Gordon
index.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();
我发现了代码的问题：拼写错误。此代码片段：
// 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);
});