生态树

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生态树</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-2.2.0/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/modeling-methods.json', function(data) {
    G6.registerNode('treeNode', {
      anchor: [[0, 0.5], [0.5, 1]]
    });
    G6.registerEdge('VH', {
      getPath: function getPath(item) {
        var points = item.getPoints();
        var start = points[0];
        var end = points[points.length - 1];
        return [['M', start.x, start.y], ['L', start.x, end.y], ['L', end.x, end.y]];
      }
    });
    var layout = new G6.Layouts.IndentedTree({
      direction: 'LR', // 方向（LR/RL/H）
      indent: 30, // 缩进量
      getVGap: function getVGap() /* d */ {
        // 竖向间距
        return 4;
      }
    });
    var tree = new G6.Tree({
      id: 'mountNode', // 容器ID
      height: window.innerHeight, // 画布高
      layout: layout,
      fitView: 'autoZoom' // 自动缩放
    });
    tree.node({
      shape: 'treeNode',
      size: 8,
      label: function label(model) {
        if (model.children && model.children.length > 0) {
          return {
            text: model.name,
            textAlign: 'right'
          };
        }
        return {
          text: model.name,
          textAlign: 'left'
        };
      },
      labelOffsetX: function labelOffsetX(model) {
        if (model.children && model.children.length > 0) {
          return -10;
        }
        return 10;
      }
    });
    tree.edge({
      shape: 'VH'
    });
    tree.read({
      roots: [data]
    });
  });
</script>
</body>
</html>

树图

流图

网图

编辑器