脑图树

<!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], [1, 0.5]]
    });
    G6.registerEdge('smooth', {
      getPath: function getPath(item) {
        var points = item.getPoints();
        var start = points[0];
        var end = points[points.length - 1];
        var hgap = Math.abs(end.x - start.x);
        if (end.x > start.x) {
          return [['M', start.x, start.y], ['C', start.x + hgap / 4, start.y, end.x - hgap / 2, end.y, end.x, end.y]];
        }
        return [['M', start.x, start.y], ['C', start.x - hgap / 4, start.y, end.x + hgap / 2, end.y, end.x, end.y]];
      }
    });
    var layout = new G6.Layouts.Mindmap({
      direction: 'H', // 方向（LR/RL/H/TB/BT/V）
      getHGap: function getHGap() /* d */ {
        // 横向间距
        return 100;
      },
      getVGap: function getVGap() /* d */ {
        // 竖向间距
        return 10;
      }
    });
    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) {
        return model.name;
      }
    });
    tree.edge({
      shape: 'smooth'
    });
    tree.on('afterchange', function() {
      tree.getNodes().forEach(function(node) {
        var model = node.getModel();
        var label = node.getLabel();
        var keyShape = node.getKeyShape();
        var parent = node.getParent();
        var box = keyShape.getBBox();
        var labelBox = label.getBBox();
        var dx = (box.maxX - box.minX + labelBox.maxX - labelBox.minX) / 2 + 8;
        var dy = (box.maxY - box.minY) / 2 + 8;
        if (parent) {
          var parentModel = parent.getModel();
          if (parentModel.x > model.x) {
            dx = -dx;
          }
          dy = 0;
        } else {
          dx = 0;
        }
        label.attr({
          x: dx,
          y: dy
        });
      });
      tree.draw();
    });
    tree.read({
      roots: [data]
    });
  });
</script>
</body>
</html>

树图

流图

网图

编辑器