1. 首页
  2. JAVASCRIPT
  3. 使用Jtopo创建一个图形拓扑显示(2):自动布局

使用Jtopo创建一个图形拓扑显示(2):自动布局

昨天,研究了一下Jtopo的入门操作, 尝试了链接线,与放置图形位置。今天研究一下,Jtopo的自动布局函数。创建模板 index.html<html> <body&...

昨天,研究了一下Jtopo的入门操作, 尝试了链接线,与放置图形位置。

今天研究一下,Jtopo的自动布局函数。


创建模板 

index.html

<html>

<body>
    <canvas id='canvas' width="850" height="550">

    </canvas>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script type="text/javascript" src="http://www.jtopo.com/download/jtopo-0.4.8-min.js"></script>
<script type="text/javascript" src="http://www.jtopo.com/demo/js/toolbar.js"></script>
<script type="text/javascript" src="test.js"></script>

</html>


创建 test.js

        
        $(document).ready(function(){                   
            var canvas = document.getElementById('canvas');
            var stage = new JTopo.Stage(canvas);
            //显示工具栏
            showJTopoToobar(stage);

            var scene = new JTopo.Scene(stage); 
            scene.alpha = 1;
            
            function addNode(text, color){
                var node = new JTopo.Node();
                node.setImage('topo/'+ color +'.png', true);
                node.text = text;
                node.fontColor = '0,0,0';
                scene.add(node);
                
    
                return node;
            }
            
            function addLink(nodeA, nodeZ){
                var link = new JTopo.FlexionalLink(nodeA, nodeZ);
                link.strokeColor = '204,204,204';
                link.lineWidth = 1;
                scene.add(link);
                return link;
            }
            
            var rootNode = addNode('root', 'gray');
            
             var icons = ['green', 'blue', 'red1', 'red2'];
             for(var i=0; i<icons.length; i++){
            
              var node = addNode('second_' + i, icons[i]);    
              addLink(rootNode, node);            
            
                  for(var j=0; j<4; j++){
                      var thirdNode = addNode('third_' + j, 'green');
                     addLink(node, thirdNode);
                        
                     if(j == 3){
                         for(var k=0; k<4; k++){
                             var kNode = addNode('leaf_' + k, 'gray');
                             addLink(thirdNode, kNode);
                         }
                     }
                  }
                
             }

            // 树形布局
            scene.doLayout(JTopo.layout.TreeLayout('down', 200, 107));
        });
scene.doLayout(JTopo.layout.TreeLayout('down', 200, 107));

主要部分是这个最后一句, 使用 scene的 doLayout函数,将会根据参数,对图形进行自动布局,接下来演示

当没有自动布局时,显示效果如下


使用Jtopo创建一个图形拓扑显示(2):自动布局 JAVASCRIPT 第1张


使用自动布局,对图形优化。

使用Jtopo创建一个图形拓扑显示(2):自动布局 JAVASCRIPT 第2张

图形会根据参数,自动分裂排布。

哎哎
相关推荐