javascript - 如何通过将鼠标悬停在 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。

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