如何在Vis.js中始终以环形显示网络节点？

Hey there! I’ve dealt with this exact issue using Vis.js before—sometimes the official docs don’t spell out all the small tweaks needed to lock a layout in place. Let’s get your nodes stuck in that circular arrangement for good.

Step 1: Enable Circular Layout #

First, you need to explicitly turn on the circular layout in your network options. This tells Vis.js to arrange nodes in a ring instead of using the default physics-based layout. Here’s how to set that up:

// Your node and edge data
const nodes = new vis.DataSet([
  { id: 1, label: "Node 1" },
  { id: 2, label: "Node 2" },
  { id: 3, label: "Node 3" },
  { id: 4, label: "Node 4" },
  { id: 5, label: "Node 5" }
]);

const edges = new vis.DataSet([
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 4 },
  { from: 3, to: 5 }
]);

const container = document.getElementById("network");
const data = { nodes: nodes, edges: edges };

// Critical layout configuration
const options = {
  layout: {
    circular: {
      enabled: true, // Turn on circular layout
      radius: 200, // Adjust ring size (optional)
      minNodeSpacing: 100 // Space between nodes (optional)
    }
  },
  // Disable physics so nodes don't shift after loading
  physics: false
};

// Initialize the network
const network = new vis.Network(container, data, options);

Step 2: Lock Nodes in Place (Prevent Dragging) #

Even with circular layout enabled, users might accidentally drag nodes out of position. To fix this, you have two straightforward options:

Option A: Set Fixed Nodes in Data

Add fixed: true directly to each node definition to lock them from the start:

const nodes = new vis.DataSet([
  { id: 1, label: "Node 1", fixed: true },
  { id: 2, label: "Node 2", fixed: true },
  // ... repeat for other nodes
]);

Option B: Lock Nodes After Layout Stabilizes

If you want nodes to arrange themselves naturally first then lock into place, use the stabilized event:

network.on("stabilized", function() {
  // Get all node IDs
  const nodeIds = nodes.getIds();
  // Set each node to fixed
  nodeIds.forEach(id => {
    nodes.update({ id: id, fixed: true });
  });
});

Key Notes #

• Disabling physics is critical here—without it, the physics simulation might still nudge nodes out of the circular arrangement, even with fixed set.
• Adjust radius and minNodeSpacing in the circular layout options to tweak how tight or spread out your ring is.
• If you need to add new nodes later, you’ll need to re-enable the circular layout temporarily or manually position the new node on the existing ring.

That should keep your network nodes in a perfect circle permanently. Let me know if you run into any kinks!

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