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",
    "nodeSize": 20,
    "rankSep": 400,
  };
  // 自定义树节点
  var DEFAULT_NODE_SIZE = layoutCfg.nodeSize;
  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',
        fontSize: 30,
        textBaseline: 'middle',
        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',
    layoutFn: G6.Layout.Dendrogram,
    layoutCfg: layoutCfg,
    height: 450,         // 画布高
    fitView: 'autoZoom', // 自动缩放
    showButton: false
  });

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

  // 渲染树图
  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 包的依赖关系。该示例的目的在于向大家展示生态树的布局效果。