G6 - 紧凑树

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>紧凑树</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script type="text/javascript">
$.getJSON('../../../static/data/g6-npm-ls-tiny-tree.json',function(data){
  var tree = new G6.Tree({
    id: 'c1',            // 容器ID
    height: 450,         // 画布高
    fitView: 'autoZoom', // 自动缩放
    layoutCfg: {
      // direction: 'LR', // 方向（LR/RL/H/TB/BT/V）
      getHGap: function(/* d */) { // 横向间距
          return 100;
      },
      getVGap: function(/* d */) { // 竖向间距
          return 10;
      },
    },
  });
  tree.source(data);
  tree.node()
    .label(function (obj) {
      return obj.name;
    })
    .style({
      fillOpacity: 1
    })
  tree.edge().shape('smooth');
  tree.render();
});
</script>

      </body>
    </html>
          

紧凑树

该图展示了 G6 里 npm 包的依赖关系。该示例的目的在于向大家展示紧凑树的布局效果。