从Gephi导出Sigma.js模板后，如何实现仅悬停节点时显示边？

Hey there! Let's get this hover-to-show-edges feature working for your Sigma.js visualization exported from Gephi. Since you mentioned you don't know JavaScript, I'll break this down with exact copy-paste code and simple steps—no prior JS experience required.

Why Your config.json Changes Didn't Work #

Sigma.js doesn't have a built-in config setting for this specific behavior, which is why your tweaks to network/config.json didn't take effect. We need to add custom event listeners in network/js/main.js to manually control edge visibility.

Step-by-Step Fix #

1. Open network/js/main.js in a basic text editor (like Notepad, VS Code, or even TextEdit).
2. Look for the section where Sigma initializes your graph. In Gephi's exported template, this usually looks like:

   sigma.parsers.json(
     'data/graph.json',
     { container: 'sigma-container' },
     function(s) {
       // We'll add our code right here!
     }
   );
   

3. Copy and paste the following code inside the callback function (where the comment is):

   // Hide all edges by default when the graph loads
   s.graph.edges().forEach(edge => {
     edge.hidden = true;
   });
   s.refresh();
   
   // Show edges connected to the hovered node
   s.bind('overNode', (event) => {
     const hoveredNodeId = event.data.node.id;
     // Loop through all edges and show those linked to the hovered node
     s.graph.edges().forEach(edge => {
       if (edge.source === hoveredNodeId || edge.target === hoveredNodeId) {
         edge.hidden = false;
       }
     });
     s.refresh(); // Update the visualization to show changes
   });
   
   // Hide all edges when mouse leaves the node
   s.bind('outNode', () => {
     s.graph.edges().forEach(edge => {
       edge.hidden = true;
     });
     s.refresh();
   });
   

What This Code Does #

• Default State: All edges stay hidden when your graph first loads
• On Hover: When you mouse over a node, it finds every edge connected to that node (either as a starting or ending point) and makes those edges visible
• On Mouse Out: As soon as you move your mouse away from the node, all edges hide again

Save and Test #

Save your changes to main.js, then open your visualization's index.html file in a browser. You should now only see edges when hovering over their connected nodes!

内容的提问来源于stack exchange，提问作者yausername