Newick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Newick</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>
  /*
   * Tamplate has default install the newest G6 && G6Plugins as
   * https://unpkg.com/@antv/g6/build/g6.js
   * https://unpkg.com/@antv/g6/build/plugins.js
   * if you can not access this url above you can install By you own
   */

/*
   * 模版已经默认按以下链接安装了最新版 G6 和 G6Plugins
   * https://unpkg.com/@antv/g6/build/g6.js
   * https://unpkg.com/@antv/g6/build/plugins.js
   * 如果你无法访问上述链接，你需要自己手动安装能访问的链接安装 G6
   */
  var _G = G6,
    Util = _G.Util;

var data = {
    "name": "F",
    "weight": 0,
    "children": [{
      "name": "A",
      "weight": 0.1
  }, {
      "name": "B",
      "weight": 0.2
  }, {
      "name": "E",
      "weight": 0.5,
      "children": [{
        "name": "C",
        "weight": 0.3
    }, {
        "name": "D",
        "weight": 0.4
    }]
  }]
  };

calculateHGap(data);
  G6.registerEdge('HV', {
    getPath: function getPath(item) {
      var group = item.getGraphicGroup();
      var source = item.getSource();
      var target = item.getTarget();
      var sourceModel = source.getModel();
      var targetModel = target.getModel();
      return [['M', sourceModel.x, sourceModel.y], ['L', sourceModel.x, targetModel.y], ['L', targetModel.x, targetModel.y]];
    }
  });
  var layout = new G6.Layouts.CompactBoxTree({
    // direction: 'LR', // 方向（LR/RL/H/TB/BT/V）
    getHGap: function getHGap(model) /* d */ {
      return model.HGap;
    },
    getVGap: function getVGap() /* d */ {
      // 竖向间距
      return 16;
    }
  });
  var tree = new G6.Tree({
    id: 'mountNode', // 容器ID
    height: window.innerHeight, // 画布高
    layout: layout,
    fitView: 'cc' // 自动缩放
  });
  tree.node({
    shape: 'treeNode',
    size: 8,
    label: function label(model) {
      var label = {
        text: model.name,
        fontSize: 18
      };
      if (model.children && model.children.length > 0) {
        label.textAlign = 'right';
      } else {
        label.textAlign = 'left';
      }
      return label;
    },
    labelOffsetX: function labelOffsetX(model) {
      if (model.children && model.children.length > 0) {
        return -10;
      }
      return 10;
    },
    labelOffsetY: function labelOffsetY(model) {
      if (model.children && model.children.length > 0) {
        return -10;
      }
      return 0;
    },

style: {
      fill: 'black',
      stroke: 'black'
    }
  });
  tree.edge({
    shape: 'HV',
    style: {
      stroke: 'black'
    },
    label: function label(model) {
      var target = tree.find(model.target);
      var targetModel = target.getModel();
      return targetModel.weight;
    },

labelOffsetY: -12
  });
  tree.read({
    roots: [data]
  });
</script>
</body>
</html>

图表简介

详见：https://en.wikipedia.org/wiki/Newick_format

树图

流图

网图

编辑器

图表简介