topology-zrender
/
large.html

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script src="node_modules/lodash/lodash.min.js"></script>
  <script src="node_modules/zrender/dist/zrender.min.js"></script>
  <script src="src/topology-zrender.js"></script>
  <script src="src/topology-zrender-tools.js"></script>
</head>

<body>
  <div id="topologyGraph" style="width: 100%;height: 100%"></div>
</body>
<script>
  var graph = topology.init(document.getElementById('topologyGraph'));


  graph.on('click', function(params) {
    alert('graph.click');
  });
  function test() {

    var dataList = [];

    for(var i = 1; i<=200; i++){
      dataList.push({
        "name": "节点名称"+i,
        "id": i,
        "pId": i==1?null:i-1
      })
    }


    console.log("当前数据节点数："+dataList.length)

    var options = {
      data: dataList,
      dataText: 'name',
      style:{
        node:{},
        drawingBoard: {}
      }
    };

    console.log("页面加载开始：" + new Date().getTime())
    var nodeList = topologyTools.recursionGraphNodeData(options);
    graph.create(nodeList);
  }

  test()
</script>

</html>