vis.js hyperlink an edge

Question

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?

Answer 1

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');
        }           
    } 
});