在sgma.js中将鼠标移到节点上时将其大小加倍

Make a node double its size on mouse over in sgma.js

本文关键字：js sgma 鼠标 节点      更新时间：2023-09-26

我很难理解sigma.js是如何处理节点和边的大小的

我知道你在图的设置中设置了minNodeSize和maxNodesSize。然后根据节点的单独大小以及图形的缩放级别分配实际显示大小。正确吗?

我想要实现的是，一个节点在mouseOver时将其大小加倍，在mouseOut时缩小到原来的大小。下面是我的代码:

var minNodeSize = 1;
var maxNodeSize = 5;
sigma.parsers.json('giantComponent.json', {
      container: 'graph',
      settings: {
        minNodeSize: minNodeSize,
        maxNodeSize: maxNodeSize
      }   
      //Assign same size to all nodes
      var s = sigma.instances()[0];
      var nodes = s.graph.nodes();
      nodes.forEach(function (n) {
          n.size= maxNodeSize/2;
      })
    }
    );
//Function to change a nodes size on mouseOVer
function interactiveNodes () {  
    var s = sigma.instances()[0];
    var nodes = s.graph.nodes();
    s.bind('overNode', function (d) {
        d.data.node.size = maxNodeSize;
        s.refresh();
    })
    s.bind('outNode', function (d) {
        d.data.node.size = maxNodeSize/2;
        s.refresh();
    })
    }

结果:当我将鼠标悬停在一个节点上时，该节点的大小保持不变，而所有其他节点的大小都缩小到原来的一半。

任何想法?

我想你是在问autoRescale选项。https://github.com/jacomyal/sigma.js/wiki/Settings全局设置

相关文章：