vis-network中如何实现默认隐藏节点标签、选中节点时才显示标签？

vis-network 默认隐藏节点标签、选中时显示配置方案 #

方案1：仅选中时显示标签（基于chosen.label回调） #

直接在网络图初始化配置的nodes字段中添加以下配置即可实现需求，节点本身存储的label属性无需修改：

const networkOptions = {
  nodes: {
    // 全局默认配置：标签字体大小设为0，默认不渲染
    font: {
      size: 0
    },
    chosen: {
      // 节点交互状态变更时的标签回调
      label: (values, id, selected, hovering) => {
        // 仅当节点被选中时，调整标签样式为可见
        if (selected) {
          // 可自定义选中时的标签大小、颜色等属性
          values.size = 14;
          values.color = "#2b7ce9";
        }
        return values;
      }
    }
  }
}

如果需要 hover 节点时也显示标签，把判断条件改为if(selected || hovering)即可。

注：scaling.label是控制画布缩放时标签的缩放规则，无法覆盖默认显隐逻辑，因此相关方案不生效。

方案2：复选框全局控制所有标签显隐 #

如果需要支持手动切换全量标签的显隐状态，可通过动态更新节点属性实现：

// 复选框change事件监听
document.getElementById("toggleLabelBtn").addEventListener("change", (e) => {
  const isShowAll = e.target.checked;
  // 批量更新所有节点的标签字体大小
  allNodes.update(allNodes.get().map(item => ({
    ...item,
    font: { ...item.font, size: isShowAll ? 14 : 0 }
  })));
  // 刷新网络图
  networkInstance.refresh();
})

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