0

D3ではなくvivaGraphJSを使用しているため、この質問は新しい質問です。D3 についていくつか質問がありましたが、解決策は少し異なります。

この VivaGraph JS を使用して、自分の Web ページでネットワーク グラフを視覚化しようとしています。

以下は、私の Web サイトのサンプル ネットワーク グラフです。そしてその HTML と JavaScript。私がやりたいことは、ユーザーが特定のノードをクリックすると、特定のページに移動することです。

サンプル ネットワーク グラフ

サンプル グラフからわかるように、すべてのノードにはイメージと「名前」があります。「name1」という名前のノードをクリックすると、https://sample.com/sample/name1に移動します。 .

「a href」を使用しようとしましたが、機能しませんでした。どうすればいいのかわかりません。誰かが方法を知っているなら、私を助けてください。graph.addNode 部分の URL は、ノードをクリックしたときに行きたいリンクではなく、ノード イメージのリンクです。この JavaScript スクリプトは、HTML 上の別のリンクされた JavaScript ファイルではなく、html に配置されます。以下のスクリプトは .

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

1 に答える 1