ATM 投资关系图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ATM 投资关系图</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/pkg/_antv.g6-2.2.6/build/plugins.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
  var _extends = Object.assign || function(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];
      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }
    return target;
  };

$.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/atm-investment.json', function(table) {
    var sankeyPlugin = new G6.Plugins['template.tableSankey']({
      table: table,
      onBeforeSankeyProcessorExecute: function onBeforeSankeyProcessorExecute(sankeyProcessor) {
        sankeyProcessor.nodeWidth(4);
        sankeyProcessor.nodePadding(16);
      },
      onBeforeRender: function onBeforeRender(graph) {
        var _this = this;

label: function label(model) {
            var label = _extends({
              text: model.field === 'cap' ? '$ ' + model.fieldValue : model.fieldValue
            }, _this.labelStyle);
            if (model.x > width / 2) {
              label.textAlign = 'right';
            } else {
              label.textAlign = 'left';
            }
            return label;
          },
          labelOffsetX: function labelOffsetX(model) {
            if (model.field === 'cap') {
              return 0;
            }
            var labelGap = 8;
            if (model.x > width / 2) {
              return -(model.x1 - model.x0) / 2 - labelGap;
            }
            return (model.x1 - model.x0) / 2 + labelGap;
          }
        });
        graph.edge({
          sourceOffset: function sourceOffset(model) {
            var source = model.source,
              target = model.target;

if (target.indexOf('cap') !== -1) {
              var sourceItem = graph.find(source);
              var sourceLabel = sourceItem.getLabel();
              var sourceLabelBox = sourceLabel.getBBox();
              return sourceLabelBox.width + 10;
            }
          },
          targetOffset: function targetOffset(model) {
            var target = model.target;

if (target.indexOf('cap') !== -1) {
              var targetItem = graph.find(target);
              var targetLabel = targetItem.getLabel();
              var targetLabelBox = targetLabel.getBBox();
              return targetLabelBox.width;
            }
          },
          style: function style(model) {
            var source = model.source,
              target = model.target;

if (field === 'cap') {
          return row.company + field + value;
        }
        return field + value;
      }
    });
    new G6.Graph({
      container: 'mountNode',
      // width: 500,
      height: window.innerHeight, // 画布高
      fitView: 'cc',
      animate: true,
      plugins: [sankeyPlugin]
    });
  });
</script>
</body>
</html>

树图

流图

网图

编辑器

ATM 投资关系图