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）
      indent: 30, // 缩进量
      getVGap: function(/* d */) { // 竖向间距
          return 0;
      },
    },
    layoutFn: G6.Layout.IndentedTree, // 缩进树布局
  });
  tree.source(data);
  tree.node()
    .label(function(obj) {
      return obj.name;
    })
    .style({
      fillOpacity: 1
    })
  tree.edge() // 不画边
      .shape('VH');
  tree.render();
});
</script>

      </body>
    </html>
          

缩进树

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