Question

这个问题是新问题，因为它使用的是vivaGraphJS，而不是D3。有一些关于D3的问题，但解决方案略有不同。

我正在尝试使用此VivaGraph JS在我的网页上可视化网络图。

以下是我网站的示例网络图。它的HTML和JavaScript。我想要做的是当用户单击特定节点时，然后转到特定页面。

从示例图中可以看出，每个节点都有自己的图像和“名称”，我想这样做：当我点击名为“name1”的节点时，我想转到https://sample.com/sample/name1。

我尝试使用“a 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标签处，我调用主函数。

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

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

</div>

Answer 1

解决这个问题。以下是我的解决方案。

views.index

只需在点击方法上添加此项。当我单击一个节点时，它会打开一个显示特定节点页面的新窗口。

网络图形可视化节点单击并呈现页面

1 个答案: