could many edges between the two nodes be clustered to one edge? #1127

zachary918 · 2020-10-22T04:10:10Z

Hi, I need some help, in my scenario, there are many edges between two nodes, it doesnot seem great, i want to cluster these edges between the two nodes into ONE edge, the nodes do not change, could i achieve it ? thank you !

carneytyler · 2020-10-23T17:23:20Z

I manually implemented this recently (code below, I'm extremely new, so there is undoubtedly room for improvement). But basically what it does it take in some nodes, gets all the connected nodes, gets the edges for each node in a node pair and intersects the edges to get the ones common to both. If it is greater than the limit it hides the intersected edges and creates a custom clustered edge (separate from the automatic ones normal clustering creates).

Then I have a network event where on click the process is run in sort of reverse to unhide all the hidden edges and then delete the clustered edge.

My specific implementation runs only when I'm unclustering a clustered node, but the general principles can be adapted to fit your specific case. I agree though that this would be a great feature to implement natively if at all possible.

    function clusterEdges(params) {
        // Takes in all subnodes of a cluster and clusters the edges if there are more than limit
        var limit = 4;
        var edgeUpdates = [];
        var i;
        for (i = 0; i < params.length; i++) {
            // Checking only non-commodity nodes
            if (params[i] >= 10000) {
                var connectedNodes = network.getConnectedNodes(params[i]);
                var initialEdges = network.getConnectedEdges(params[i]);
                var j;
                for (j = 0; j < connectedNodes.length; j++) {
                    if (connectedNodes[j] >= 10000 && params[i] != connectedNodes[j]) {
                        var connectedNodeEdges = network.getConnectedEdges(connectedNodes[j]);
                        // Basically get an intersection of connected edges between two nodes
                        var commonEdges = initialEdges.filter(function(n) {
                            return connectedNodeEdges.indexOf(n) !== -1;
                        });
                        // If the number of that intersection is greater than limit we'll hide them
                        if (commonEdges.length >= limit) {
                            var alreadyClustered = false;
                            var title = "<html><b>Something:</b><br>"
                            var k
                            for (k = 0; k < commonEdges.length; k++) {
                                // Making sure we only hide the something edges (ids are ints)
                                if (typeof commonEdges[k] != "string") {
                                    edgeUpdates.push({id: commonEdges[k], hidden: true, physics: true});
                                    title += data.edges.get(commonEdges[k]).label + "<br>";
                                } else if (commonEdges[k].substring(0, 5) == "CEdge") {
                                    alreadyClustered = true;
                                };
                            };
                            title += "</html>"
                            // This alreadyClustered is to prevent duplicate clustered edges from being created
                            if (!(alreadyClustered)) {
                                edgeUpdates.push({id: 'CEdge:' + uuidv4(), from: params[i], to: connectedNodes[j], label: 'Clustered Interface', title: title, hidden: false, physics: true});
                            };
                        };
                    };
                };
            };
        };
        data.edges.update(edgeUpdates);
    };
    function unClusterEdges(params) {
        // Determines if clicked edge is a clustered edge. Unhides all hidden edges and deletes original clustered edge
        if (params.edges.length == 1) {
            var edgeId = params.edges[0];
            if (typeof edgeId == "string") {
                if (edgeId.substring(0, 5) == "CEdge") {
                    var edgeUpdates = [];
                    var nodes = network.getConnectedNodes(edgeId);
                    node0edges = network.getConnectedEdges(nodes[0]);
                    node1edges = network.getConnectedEdges(nodes[1]);
                    var commonEdges = node0edges.filter(function(n) {
                        return node1edges.indexOf(n) !== -1;
                    });
                    var k
                    for (k = 0; k < commonEdges.length; k++) {
                        edgeUpdates.push({id: commonEdges[k], hidden: false, physics: true});
                    };
                    data.edges.remove(edgeId);
                    data.edges.update(edgeUpdates);
                };
            };
        };
    };

Thomaash added the enhancement New feature or request label Oct 25, 2020

janhellevik mentioned this issue Apr 16, 2024

[Snyk] Upgrade vis-data from 7.1.6 to 7.1.9 janhellevik/vis-network#2

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

could many edges between the two nodes be clustered to one edge? #1127

could many edges between the two nodes be clustered to one edge? #1127

zachary918 commented Oct 22, 2020

carneytyler commented Oct 23, 2020 •

edited

Loading

could many edges between the two nodes be clustered to one edge? #1127

could many edges between the two nodes be clustered to one edge? #1127

Comments

zachary918 commented Oct 22, 2020

carneytyler commented Oct 23, 2020 • edited Loading

carneytyler commented Oct 23, 2020 •

edited

Loading