Is visjs-network supported by vue3?

201 views Asked by At

I am using visjs network module and making a project using vue3. This code checks for clicked node and just show incoming and outgoing connections of it , rest other nodes and edges get disappeared.

    network.on("click", function (params) {
    // Reset the color and visibility of all nodes and edges to their default color
    nodes.forEach(function (node) {
    node.color = undefined;
    node.hidden = false;
    });
    
    edges.forEach(function (edge) {
    edge.color = undefined;
    edge.hidden = false;
    });
    
    if (params.nodes.length > 0) {
    var clickedNodeId = params.nodes[0];
    var clickedNode = nodes.get(clickedNodeId);
    if (clickedNode) {
        // Update the clicked node color to red
        clickedNode.color = "#fadd8e";
    
        // Update the color of connected nodes to red
        var connectedEdges = edges.get({ filter: function (edge) {
        return edge.from === clickedNodeId || edge.to === clickedNodeId;
        }});
    
        // Make all other nodes and edges hidden
        nodes.forEach(function (node) {
        if (node.id !== clickedNodeId && !connectedEdges.some(edge => edge.to === node.id || edge.from         === node.id)) {
            node.hidden = true;
        }
        });
        edges.forEach(function (edge) {
        if (edge.from !== clickedNodeId && edge.to !== clickedNodeId) {
            edge.hidden = true;
        }
        });
    
        // Update the network with the modified data to reflect the color changes
        network.setData(data);
        }
        } else {
            // If a click occurred outside of any node, simply reset the colors and visibility
            network.setData(data);
        }
    }

But if i'm doing the same in vue3 it's not working. It's giving error:

Uncaught TypeError: Cannot read private member from an object whose class did not declare it at __classPrivateFieldGet (weak-map.js:1:18) at Proxy.clear (selection-accumulator.ts:138:5) at Proxy.unselectAll (SelectionHandler.js:369:32) at Network.setData (Network.js:398:25) at Network.<anonymous> (App.vue:329:24) at Emitter3.emit (index.js:145:20) at SelectionHandler2.generateClickEvent (SelectionHandler.js:165:23) at InteractionHandler2.onTap (InteractionHandler.js:157:27) at Array.<anonymous> (Canvas.js:291:32) at Manager3.emit (hammer.esm.js:2711:17)

Did anyone faced the same issue ?

0

There are 0 answers