求助：修复Vis.js中节点连接信息的JSON文件保存错误

Hey there! Let's fix that connection saving issue for your network nodes. From the snippet you shared (it looks like you're using vis.js for the network visualization, given the #mynetwork container), here's a complete, working solution to correctly save your nodes, their positions, and the connection edges to a JSON file:

Step-by-Step Fixed Code #

<!DOCTYPE html>
<html>
<head>
    <style>
        body, select { font: 14pt sans; }
        #mynetwork { width: 800px; height: 500px; border: 1px solid green; }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
</head>
<body>
    <div id="mynetwork"></div>
    <button onclick="saveNetworkData()">Save Network to JSON</button>

    <script>
        // Initialize your exact node setup
        const nodes = new vis.DataSet([
            {id: 1, label: 'Parent Node 1'},
            {id: 2, label: 'Parent Node 2'},
            {id: 3, label: 'Child Node 3'},
            {id: 4, label: 'Isolated Node 4'}
        ]);

        // Set up the correct edges (1 → 3, 2 → 3)
        const edges = new vis.DataSet([
            {from: 1, to: 3},
            {from: 2, to: 3}
        ]);

        // Initialize the network
        const container = document.getElementById('mynetwork');
        const network = new vis.Network(container, { nodes, edges }, {});

        function saveNetworkData() {
            // Get real-time positions of all nodes
            const nodePositions = network.getPositions();
            
            // Merge node data with their coordinates
            const nodesWithCoords = nodes.get().map(node => ({
                ...node,
                x: nodePositions[node.id].x,
                y: nodePositions[node.id].y
            }));
            
            // Extract the correct edge connections
            const edgeConnections = edges.get();
            
            // Build the final JSON structure
            const networkJSON = {
                nodes: nodesWithCoords,
                edges: edgeConnections
            };
            
            // Convert to formatted JSON string
            const jsonOutput = JSON.stringify(networkJSON, null, 2);
            
            // Trigger browser download for the JSON file
            const blob = new Blob([jsonOutput], { type: 'application/json' });
            const downloadLink = document.createElement('a');
            downloadLink.href = URL.createObjectURL(blob);
            downloadLink.download = 'network-data.json';
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
            URL.revokeObjectURL(downloadLink.href);

            console.log('Saved JSON data:', jsonOutput);
        }
    </script>
</body>
</html>

Key Fixes & Explanations #

• Correct Edge Storage: We use edges.get() to pull the exact from/to connection data you defined (no more incorrect links). This directly accesses the vis.js DataSet that tracks your edges reliably.
• Node Coordinates: network.getPositions() grabs the current on-screen position of every node, so your JSON will include accurate x/y values along with node IDs and labels.
• Structured JSON Output: The final JSON will have two clear arrays:
  • nodes: Each entry has id, label, x, y
  • edges: Each entry has from (parent node ID) and to (child node ID)

Example Saved JSON #

Here’s what your correct saved file will look like (positions will match your actual layout):

{
  "nodes": [
    {
      "id": 1,
      "label": "Parent Node 1",
      "x": 150,
      "y": 100
    },
    {
      "id": 2,
      "label": "Parent Node 2",
      "x": 350,
      "y": 100
    },
    {
      "id": 3,
      "label": "Child Node 3",
      "x": 250,
      "y": 250
    },
    {
      "id": 4,
      "label": "Isolated Node 4",
      "x": 500,
      "y": 150
    }
  ],
  "edges": [
    {
      "from": 1,
      "to": 3
    },
    {
      "from": 2,
      "to": 3
    }
  ]
}

This should resolve your connection saving issue completely. Test it out—when you move nodes around and click "Save Network to JSON", the file will always have the correct parent-child links and node positions.

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