network graph visualization node click and render a page

Question

This question is new question, because it uses vivaGraphJS, not D3. there were some questions about D3 but the solution is little different.

I am trying to visualize a network graph on my web page using this VivaGraph JS.

Below is my website's sample network graph. And its HTML, and JavaScript. What I want to do is that when users click a specific node, then go to the specific page.

A sample network graph

As you can see from the sample graph, every node has its image and "name", I want to do: when I click a node named "name1", I want to go to https://sample.com/sample/name1.

I tried to use "a href" but it didn't work. I am not sure how should I do this. If anyone know how to do, then please help me. The urls on the graph.addNode part is the node image links, not the link I want to go when I click the node. This JavaScript script is put into the html, not a separate and linked javascript file on the HTML. Below script is in the .

<script src="{{ url_for('static', filename='.../dist/vivagraph.js') }}"></script>
<script src="{{ url_for('static', filename='.../dist/vivagraph.min.js') }}"></script>
<script type="text/javascript" src="..js/jquery.min.js"></script>

<script type="text/javascript">
    function main () {

        var graph = Viva.Graph.graph();

        // Construct the graph
        graph.addNode('anvaka', {url : 'image link_url_1'});
        graph.addNode('manunt', {url : 'image link_url_2'});
        graph.addNode('thlorenz', {url : 'image link_url_3'});
        graph.addNode('bling', {url : 'image link_url_4'});
        graph.addNode('diyan', {url : 'image link_url_5'});
        graph.addNode('pocheptsov', {url : 'image link_url_6'});
        graph.addNode('dimapasko', {url : 'image link_url_7'});

        graph.addLink('anvaka', 'manunt');
        graph.addLink('anvaka', 'thlorenz');
        graph.addLink('anvaka', 'bling');
        graph.addLink('anvaka', 'diyan');
        graph.addLink('anvaka', 'pocheptsov');
        graph.addLink('diyan', 'dimapasko');

        // Set custom nodes appearance
        var graphics = Viva.Graph.View.svgGraphics(),

            nodeSize = 20;
            highlightRelatedNodes = function(nodeId, isOn) {
                       // just enumerate all realted nodes and update link color:
               graph.forEachLinkedNode(nodeId, function(node, link){
                   var linkUI = graphics.getLinkUI(link.id);
                   if (linkUI) {
                       // linkUI is a UI object created by graphics below
                       linkUI.attr('stroke', isOn ? '#F1C40F' : 'gray');
                   }
               });
            };


        graphics.node(function(node) {
               // The function is called every time renderer needs a ui to display node
               var ui = Viva.Graph.svg('g'),
                   svgText = Viva.Graph.svg('text').attr('y', '-4px').text(node.id),
                   img = Viva.Graph.svg('image')
                     .attr('width', nodeSize)
                     .attr('height', nodeSize)
                     .link(node.data.url);

                $(ui).hover(function() { // mouse over
                    highlightRelatedNodes(node.id, true);
                }, function() { // mouse out
                    highlightRelatedNodes(node.id, false);
                });

                ui.append(svgText);
                ui.append(img);
                return ui;

            })
            .placeNode(function(nodeUI, pos){
                // Shift image to let links go to the center:
                nodeUI.attr('transform',
                            'translate('+ 
                                    (pos.x - nodeSize / 2) + ',' + (pos.y - nodeSize / 2) + ')');
            });

            graphics.link(function(link){
                return Viva.Graph.svg('path')
                           .attr('stroke', 'gray');
            }).placeLink(function(linkUI, fromPos, toPos) {
                // linkUI - is the object returend from link() callback above.
                var data = 'M' + fromPos.x + ',' + fromPos.y +
                           'L' + toPos.x + ',' + toPos.y;

                // 'Path data' (http://www.w3.org/TR/SVG/paths.html#DAttribute )
                // is a common way of rendering paths in SVG:
                linkUI.attr("d", data);
            });

        var renderer = Viva.Graph.View.renderer(graph,
            {
                graphics : graphics
            });
        renderer.run();

    }
</script>
<style type="text/css" media="screen">
        svg { width: 100%; height: 50%; }
</style>

And down at a div tag in the HTML file, I call the main function.

<div role="tabpanel" class="tab-pane fade in active" id="Marketoverview">

                <script type="text/javascript">
                   main();
                </script>

</div>

Answer 1

Just solve this problem. Below is my solution.

$(ui).on('click', node, function(){

                    window.open("/.../.../"+node.id.toLowerCase());

});

Simply adding this on click method. When I click a node, it open a new window showing the specific node page.