如何通过将鼠标悬停在 sigmaJs 中的当前节点上来仅对当前节点和连接的节点绘制标签？

Question

我正在使用 sigmaJs 的 overNode 事件我的设置对象

settings: {
        autoRescale: ["nodePosition", "nodeSize"],
        labelThreshold: 0,
        adjustSizes: true,
        fixed: true,
        labelHoverBGColor: "#f45b3d",
        nodeMargin: 50,
        nodesPowRatio: 1,
        defaultNodeBorderColor: '#000000',
        minArrowSize: 7,
        drawLabels: false,
      }

this.s.bind("overNode", (d) => {
      this.s.graph.edges().forEach((e) => {
        if (e.target === d.data.node.id || e.source === d.data.node.id) 
        {
          e.color = "#407784";
          e.size = 3;
        } else {
          e.color = e.originalColor;
          e.size = 1;
        }
      });
      this.s.refresh();
    })

我可以使用 overNode 悬停并突出显示已连接的节点，但 nodeLabel 未显示。

在设置中，我最初将 drawLabels 设置为 false，因为我最初不想显示标签。

因此，如果我将鼠标悬停在任何节点上，我只想显示连接标签的标签。

Answer 1

你可以试试下面的逻辑：

this.s.graph.nodes().forEach(n => {
      if (n.id !== d.data.node.id) {
        n.color = "#D3D3D3";
        n.label = '';
      } else {
        n.label = n.displayLabel;
      }
    })

第一次，当您将数据推送到节点时，只需将空字符串作为标签传递并添加另一个属性显示标签。

请确保 drawLabels 属性为 true，overNode drawLabels 必须为 true，outNode drawLabels 必须为 false。

现在上面的 for 循环将在您想要显示标签时使用该 displayLabel 属性。

如何通过将鼠标悬停在 sigmaJs 中的当前节点上来仅对当前节点和连接的节点绘制标签？

How to drawLabels true only for current node and connected node by hovering on current Node in sigmaJs?

javascript

sigma.js

angular