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 Util = G6.Util;
  // 准备布局配置
  var layoutCfg = {
   "direction": "LR",
   "nodeSep": 20,
   "nodeSize": 20,
   "rankSep": 200
  };
  // 自定义树节点
  var DEFAULT_NODE_SIZE = 5;
  G6.registNode('treeNode', {
   draw(cfg, group) {
     var model = cfg.model;
     var r = layoutCfg.nodeSize ? layoutCfg.nodeSize / 2 : DEFAULT_NODE_SIZE;
     var shapeCfg = {
       attrs: {
         x: cfg.x,
         y: cfg.y,
         r: r,
         stroke: '#003380',
         fill: 'white',
         fillOpacity: 1,
       },
     };
     if (model.children && model.children.length) {
       shapeCfg.class = model.isCollapsed ? 'spreadoutButton' : 'collapseButton';
       shapeCfg.attrs.fill = '#044A9A';
       shapeCfg.attrs.stroke = '#003380';
       shapeCfg.attrs.fillOpacity = 0.4;
     }
     if (model.root) {
       shapeCfg.attrs.fill = '#044A9A';
       shapeCfg.attrs.stroke = '#003380';
       shapeCfg.attrs.fillOpacity = 0.7;
     }
     shapeCfg.attrStash = Util.mix({}, shapeCfg.attrs);
     return group.addShape('circle', shapeCfg);
   },
   afterDraw(cfg, group) {
     var model = cfg.model;
     var r = layoutCfg.nodeSize ? layoutCfg.nodeSize / 2 : DEFAULT_NODE_SIZE;
     var align = model.align;
     var labelAttrs = {
       text: model.name,
       fill: '#666',
       textBaseline: 'middle',
       fontSize: 20,
       x: cfg.x + r + DEFAULT_NODE_SIZE,
       y: cfg.y,
       textAlign: 'left',
     };
     if (align === 'R') {
       Util.mix(labelAttrs, {
         x: cfg.x - r - DEFAULT_NODE_SIZE,
         y: cfg.y,
         textAlign: 'right',
       });
     } else if (align === 'T' || align === 'CH') {
       Util.mix(labelAttrs, {
         x: cfg.x,
         y: cfg.y + r + DEFAULT_NODE_SIZE,
         textAlign: 'right',
         rotate: -Math.PI / 2,
       });
     } else if (align === 'B') {
       Util.mix(labelAttrs, {
         x: cfg.x,
         y: cfg.y - r - DEFAULT_NODE_SIZE,
         textAlign: 'left',
         rotate: -Math.PI / 2,
       });
     }
     var label = group.addShape('text', {
       attrs: labelAttrs,
     });
     return label;
   }
  });

  // 生成树图实例
  var tree = new G6.Tree({
    id: 'c1',                            // 容器ID
    height: 450,                         // 画布高
    fitView: 'autoZoom',                 // 自动缩放
    layoutFn: G6.Layout.LayeredTidyTree, // 布局类型
    layoutCfg: layoutCfg,                // 布局配置
    showButton: false,
  });

  // 加载数据
  tree.source(data);
  tree.node().shape('treeNode');
  tree.edge()
     .shape('smooth')
     .style({
       stroke: '#A9BCD3'
     });

  // 渲染树图
  tree.render();

  // 添加事件
  tree.on('mouseenter', function(ev){
   var shape = ev.shape;
   if (shape && shape.hasClass('Button')) {
     shape.attr('fillOpacity', 0.2);
     shape.attr('strokeOpacity', 0.8);
     tree.refresh();
   }
  });
  tree.on('mouseleave', function(ev){
   var shape = ev.shape;
   var attrStash;
   if (shape && shape.hasClass('Button')) {
     attrStash = shape.get('attrStash');
     shape.attr(attrStash);
     tree.refresh();
   }
  });
});
</script>

      </body>
    </html>
          
        
分层树
该图展示了 G6 里 npm 包的依赖关系。该示例的目的在于向大家展示分层树的布局效果。