在 sgma.js 中将鼠标悬停在节点上使其大小加倍

Question

我有点难以理解 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();
    })
    }

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

有什么想法吗？

Answer 1

我认为您要求的是 autoRescale 选项。 https://github.com/jacomyal/sigma.js/wiki/Settings#global-settings

在 sgma.js 中将鼠标悬停在节点上使其大小加倍

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

javascript

sigma.js