Search code examples
vis.jsvis.js-network

Cluster multiple edges between two nodes


I'm using vis.js for network visualization. My idea is to develop a solution like Google Maps Zoom in the sense that it clusters edges and nodes when not zoomed.

I want to cluster nodes apart from clustering multiple edges between the same two nodes. Like a cluster nodes, when clustered edge is zoomed or clicked, I want to show all different edges with more information.

I haven't found an answer in vis.js documentation for clustering, issues and questions. Is this feature available?


Solution

  • As far as I understand, the term "clustering" is applicable to nodes only in vis.js' vocabulary. However, what you can do is to hide edges.

    You have to set an on click handler where you grab the selected edge, get its from and to nodes (you have to decide what to do if there's more than one selected edge, though), find the edges connecting them and hide all but one.

    network.on('click',function(eventParams){
    
        var edges = eventParams.edges;
        if(edges.length == 0)
            return;
    
        var edge = edges[0],
            fromID = edge.from,
            toID = edge.to;
    
        // get the nodes by ids, find all edges connecting them, hide all but the selected one
    });
    

    To advance it further to toggling, you have to check if any of the connecting edges are hidden show all if at least one is hidden, or hide all but one otherwise.