vis.js hyperlink an edge

user_7546711 0
Viewed 928

Is it possible to get a hyperlink to work on an edge?

Example, I have two nodes that are connected, And have a label on them

{ id: 1601, label: 'label', x: -1085, y: -429, url: 'link' },

So for the above, The url works for the node when using this option 

network.on("selectNode", function (params) {
    if (params.nodes.length === 1) {
        var node = nodes.get(params.nodes[0]);
        window.open(node.url, '_blank');
    }
});

Now I have a link between two nodes using the standard config 

{ from: 1600, to: 1613, label: "label value" },

Is it possible to get a huperlink to work on the lines / edge that connections the two nodes?

vis.js-network vis.js javascript
1 Answers

Basically, changing "node" to "edge" in your code works to open the url when an edge is selected. But, selecting a node also results in selecting all the adjacent edges. You only get one selectEdge callback, but probably want to ignore it in any case. If you want to rule out the case where someone selected the node, where there happens to be just one connected edge, then add a check for that as follows:

network.on("selectEdge", function(params) {     
    if ((params.edges.length == 1) && (params.nodes.length == 0)) {
        var edgeId = params.edges[0];
         window.open(edges.get(edgeId).url, '_blank');                  
    } 
});

There's still a problem in using "select" for this. If you have previously selected a node, then the adjacent edges are selected, even if you don't see it because of the checking above. If you then click on one of those adjacent edges, you don't get the callback because that edge was already selected. It might be better to use the network.on("click" ... ) method instead:

network.on("click", function(params) {                              
    if (params.nodes.length == 1) {
        var nodeId = params.nodes[0];
        if (nodes.get(nodeId).url != null) {
            window.open(nodes.get(nodeId).url, '_blank');
        }           
    } else if (params.edges.length==1) {
        var edgeId = params.edges[0];       
        if (edges.get(edgeId).url != null) {
            window.open(edges.get(edgeId).url, '_blank');
        }           
    } 
});
user_87665820
Related