javascript - 使用 VivaGraphJS 的常量布局图-6ren

javascript - 使用 VivaGraphJS 的常量布局图

转载作者：行者123 更新时间：2023-11-29 19:51:26

我用 VivaGraphJS 创建了一个图表，一切都很好，但图表在移动。有一个关于 constantLayout 的例子，但你应该为每个节点指定一个位置的问题。

代码如下:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="../js/vivagraph.js"></script>
    <script type="text/javascript">
        function main () {
            // create a graph object.
            var graph = Viva.Graph.graph();

            add nodes and edges to the graph:
            graph.addLink(1, 2);
            graph.addLink(1, 3);
            graph.addLink(1, 4);
            var renderer = Viva.Graph.View.renderer(graph);
            renderer.run();
        }
    </script>

    <style type="text/css" media="screen">
        html, body, svg { width: 100%; height: 100%;}
    </style>
</head>
<body onload='main()'>
</body>
</html>

这里是关于常量布局的代码:

<!DOCTYPE html>
<html>
    <head>
        <title>VivaGraphs constant layout demo page</title>
        <script src="../../dist/vivagraph.js"></script>

        <script type='text/javascript'>

            function onLoad() {
                var graph = Viva.Graph.graph(),
                    nodePositions = [{x : -50, y: 0}, {x : 0, y: -50}, {x : 50, y: 0}], // predefined node positions
                    layout = Viva.Graph.Layout.constant(graph),
                    renderer = Viva.Graph.View.renderer(graph, {
                                   layout     : layout, // use our custom 'constant' layout
                               }),

                    i, nodesCount = nodePositions.length; // convinience variables.

                // Add nodes
                for(i = 0; i < nodesCount; ++i) {
                    graph.addNode(i, nodePositions[i]);
                }

                // and make them connected in cycle:
                for (i = 0; i < nodesCount; ++i) {
                    graph.addLink(i % nodesCount, (i + 1) % nodesCount);
                }

                // set custom node placement callback for layout.
                // if you don't do this, constant layout performs random positioning.
                layout.placeNode(function(node) {
                    // node.id - points to its position but you can do your 
                    // random logic here. E.g. read from specific node.data
                    // attributes. This callback is expected to return object {x : .. , y : .. }
                    return nodePositions[node.id]; 
                });

                renderer.run();
            }
        </script>

        <style type="text/css" media="screen">
            body, html, svg { width: 100%; height: 100%; overflow: hidden; }
        </style>
    </head>
    <body onload="onLoad()">

    </body>

有什么建议!？

我希望我能很好地解释我的问题。谢谢

最佳答案

如果你想拥有动态布局，但又想在某个时刻停止动画，请使用 renderer.pasue() 方法。

如果你想有一个固定的布局，你可以在你的代码中添加一些东西来告诉它你的节点的位置。这是您需要的代码:

function main () {
    // create a graph object.
    var graph = Viva.Graph.graph(),
        nodePositions = [{x : -50, y: 0}, {x : 0, y: -50}, {x : 50, y: 0}, {x: 60, y: 20}], 
        layout = Viva.Graph.Layout.constant(graph);

    for(var i = 1; i < 5; i++) {
       graph.addNode(i, nodePositions[i-1]);
    }

    graph.addLink(1, 2);
    graph.addLink(1, 3);
    graph.addLink(1, 4);
    layout.placeNode(function(node) {
       return nodePositions[node.id-1]; 
    });
    var renderer = Viva.Graph.View.renderer(graph, { layout:layout });
    renderer.run();
}

关于javascript - 使用 VivaGraphJS 的常量布局图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17643853/

文章推荐： javascript - jQuery append() html 语法行为

文章推荐： javascript - 如何从头开始创建 JQuery slider ？

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 VivaGraphJS 的常量布局图