I am learning to use antv/G6 for network visualization. I have hover over nodes working properly (nodes are steelblue and change to red when hovering.) However over edges is not working properly. An edge changes color when the mouse enters its shape. However, the color does not return to default once the mouse leaves. I have created a MWE with four nodes and two edges. Any help is greatly appreciated. Thanks. The code follows and is self-contained. I usually run http-server and get similar behavior with Chrome, Firefox, and Safari on a Macbook Pro loaded with BigSur, OS11.4 .
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();
I found the issue with my code: a spelling error.This code fragment:
should have been written as: