Sankey 桑基图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sankey 桑基图</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/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/lib/d3/5.9.1/dist/d3.min.js"></script>
<script src="https://gw.alipayobjects.com/os/lib/d3-sankey/0.12.1/dist/d3-sankey.min.js"></script>
<script>
  var width = window.innerWidth;
  var height = window.innerHeight;
  var colors = ['#1890FF', '#73C9E6', '#13C2C2', '#6CD9B3', '#2FC25B', '#9DD96C', '#FACC14', '#E6965C', '#F04864', '#D66BCA', '#8543E0', '#8E77ED', '#3436C7', '#737EE6', '#223273', '#7EA2E6'];

G6.registerEdge('sankey', {
    draw: function draw(cfg, group) {
      var data = cfg.data;
      var shape = group.addShape('path', {
        attrs: {
          stroke: 'rgba(0,0,0,0.1)',
          lineWidth: Math.max(1, data.width),
          path: pathFn(data)
        }
      });
      return shape;
    }
  }, 'line');
  var graph = new G6.Graph({
    container: 'mountNode',
    width: width,
    height: height,
    defaultNode: {
      style: {
        stroke: null
      }
    },
    edgeStateStyles: {
      active: {
        stroke: 'rgba(0,0,0,0.3)'
      }
    }
  });
  var pathFn = d3.sankeyLinkHorizontal();
  var sankey = d3.sankey().nodeWidth(15).nodePadding(10).extent([[1, 5], [width - 10, height - 5]]);
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/energy-flow.json', function(energy) {
    sankey(energy);
    var nodes = [];
    var edges = [];
    energy.nodes.forEach(function(node) {
      var nodeWidth = node.x1 - node.x0;
      var nodeHeight = node.y1 - node.y0;
      nodes.push({
        id: node.name,
        label: node.name,
        style: {
          fill: colors[Math.round(Math.random() * 15)]
        },
        x: node.x0 + 7.5,
        y: node.y0 + nodeHeight / 2,
        size: [nodeWidth, nodeHeight],
        shape: 'rect',
        labelCfg: {
          position: node.x1 > width / 2 ? 'left' : 'right',
          offset: 5
        }
      });
    });
    energy.links.forEach(function(edge) {
      var source = edge.source;
      var target = edge.target;
      edges.push({
        id: source.name + ':' + target.name,
        source: source.name,
        target: target.name,
        shape: 'sankey',
        data: edge
      });
    });
    graph.data({
      nodes: nodes,
      edges: edges
    });
    graph.render();
    graph.fitView();
    graph.on('edge:mouseenter', function(e) {
      graph.setItemState(e.item, 'active', true);
    });
    graph.on('edge:mouseleave', function(e) {
      graph.setItemState(e.item, 'active', false);
    });
  });
</script>
</body>
</html>

树图

一般图

其他表达形式

元素

交互

动画

辅助工具

复杂案例

Sankey 桑基图