G2 - The Grammar Of Graphics

关系图 / 桑基图

选择主题

源码

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>桑基图</title>
      <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/>
      
      <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
    </head>
    <body>
      <div id="c1"></div>
      
      <script>
$.getJSON('../../static/data/sankey.json', function(edges) {
  var Stat = G2.Stat;// 统计算法对象
  var Layout = G2.Layout;// 布局算法对像

var chart = new G2.Chart({
    id: 'c1',
    width: 1000,
    height: 500,
    animate: false,
    plotCfg: {
      margin: [20,200,20,20]
    }
  });

chart.tooltip({
    title: null
  });
  chart.legend(false);

// 桑基图布局
  var layout = new Layout.Sankey({
    edges: edges,
    thickness: 0.02  // 节点厚度
  });
  var nodes = layout.getNodes(); // 根据边数据自动创建出节点，并完成节点的布局

// 创建边的视图
  var edgeView = chart.createView();
  edgeView.source(edges);
  edgeView.coord().transpose();
  edgeView.axis(false);
  edgeView.edge()
    // 由于边的坐标数据较多，此处使用统计函数简化语法，Stat.link计算布局后的边的坐标，放在..x和..y中，数值范围是 0-1
    .position(Stat.link.sankey('source*target*value',nodes)) // detachment：是否将节点的输入边和输出边权重分开计算的标志
    .shape('arc') // 使用弧线完成边的绘制
    .color('#bbb')
    .opacity(0.6)
    .tooltip('value');

// 创建节点视图
  var nodeView = chart.createView();
  nodeView.axis(false);
  nodeView.source(nodes);
  nodeView.coord().transpose();
  nodeView.point()
    .position('x*y') // nodes数据的x、y由layout方法计算得出
    .color('id')
    .size('width*height',function(width,height){
      return [width,height];
    })
    .shape('rect')
    .label('id',{
      offset:12
    })
    .style({
      stroke: '#ccc'
    });
  chart.render();
});

</script>

</body>
  </html>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
      <script>
        G2.Global.setTheme('dark');
      </script>
    </head>
    <body>
      <div id="c1"></div>
      <script>
$.getJSON('../../static/data/sankey.json', function(edges) {
  var Stat = G2.Stat;// 统计算法对象
  var Layout = G2.Layout;// 布局算法对像

var chart = new G2.Chart({
    id: 'c1',
    width: 1000,
    height: 500,
    animate: false,
    plotCfg: {
      margin: [20,200,20,20]
    }
  });

chart.tooltip({
    title: null
  });
  chart.legend(false);

</script>

</body>
  </html>

var chart = new G2.Chart({
    id: 'c1',
    width: 1000,
    height: 500,
    animate: false,
    plotCfg: {
      margin: [20,200,20,20]
    }
  });

chart.tooltip({
    title: null
  });
  chart.legend(false);

</script>

桑基图

桑基图（Sankey diagram），即桑基能量分流图，也叫桑基能量平衡图。它是一种特定类型的流程图，图中延伸的分支的宽度对应数据流量的大小，通常应用于能源、材料成分、金融等数据的可视化分析。