網絡圖形可視化節點單擊並呈現頁面

Question

此問題是一個新問題，因爲它使用vivaGraphJS，而不是D3。有關D3的一些問題，但解決方案有點不同。

我想使用這個VivaGraph JS在我的網頁上可視化網絡圖。

以下是我網站的示例網絡圖。其HTML和JavaScript。 我想要做的是，當用戶點擊一個特定的節點，然後轉到特定的頁面。

A sample network graph

你可以從樣品圖中看到，每一個節點都有它的形象和「名」，我想做的事：當我點擊一個名爲「名1」節點，我想去https://sample.com/sample/name1。

我試圖使用「一個href」，但它沒有工作。我不知道我該怎麼做。如果有人知道該怎麼做，那麼請幫助我。 graph.addNode部分上的url是節點圖像鏈接，而不是我單擊節點時要走的鏈接。這個JavaScript腳本被放入html中，而不是HTML上的單獨鏈接的JavaScript文件。下面的腳本在。

<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> 

然後在HTML文件的div標籤中，我調用main函數。

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

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

</div> 

Answer 1

只要解決這個問題。以下是我的解決方案。

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

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

}); 

只需在點擊方法中添加此項即可。當我點擊一個節點時，它會打開一個顯示特定節點頁面的新窗口。