Vis.js网络中缩放时保持节点尺寸不变的实现方法咨询

嘿，我之前也碰到过这个头疼的问题！你尝试的scaling.min/max和customScalingFunction其实找错了方向——它们是用来控制节点基于数据值的大小缩放（比如用节点的value属性来限定尺寸范围），和视图缩放时的节点视觉大小完全不相关，所以自然起不到作用。

要实现缩放操作时节点尺寸始终固定，我们需要监听网络的缩放事件，动态调整节点大小来抵消视图缩放的影响。具体步骤如下：

1. 保存节点原始尺寸：初始化节点时，给每个节点添加originalSize属性，记录它的初始大小，方便后续计算。
2. 监听缩放事件：当网络发生缩放时，获取当前的缩放比例，将每个节点的size设置为「原始尺寸 ÷ 当前缩放比例」，以此抵消缩放带来的视觉大小变化。

代码示例 #

// 初始化节点，为每个节点保留原始尺寸
const nodes = new vis.DataSet([
  { id: 1, label: "节点1", size: 10, originalSize: 10 },
  { id: 2, label: "节点2", size: 15, originalSize: 15 },
  { id: 3, label: "节点3", size: 20, originalSize: 20 }
]);

// 初始化边（示例）
const edges = new vis.DataSet([
  { from: 1, to: 2 },
  { from: 2, to: 3 }
]);

// 创建网络实例
const container = document.getElementById("network");
const data = { nodes: nodes, edges: edges };
const options = {
  // 你的其他网络配置，比如布局、交互规则等
  interaction: {
    zoomView: true // 确保缩放功能正常开启
  }
};
const network = new vis.Network(container, data, options);

// 监听缩放事件，动态调整节点大小抵消缩放影响
network.on("zoom", (params) => {
  const currentScale = params.scale;
  // 遍历所有节点，更新尺寸
  nodes.forEach(node => {
    nodes.update({ 
      id: node.id, 
      size: node.originalSize / currentScale 
    });
  });
});

注意事项 #

• 如果后续有新节点添加到网络中，记得给新节点也设置originalSize属性，否则新节点不会应用这个尺寸保持逻辑。
• 这个方法会实时更新节点尺寸，在节点数量极多的场景下可能有轻微性能开销，但对于常规规模的网络来说完全够用。

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