g6js+dagre实现从上到下流程图示例代码-html代码-BFW代码库

g6js+dagre实现从上到下流程图示例代码

代码语言：html

所属分类：图表

代码描述：g6js+dagre实现从上到下流程图示例代码，这里演示的是g6的v3.1.0版本。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!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 type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/antv.g6-3.1.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dagre.min.js"></script>
<script>
  var data = {
    nodes: [{
      id: '收集日志'
  }, {
      id: '入 es 集群'
  }, {
      id: '入 hdfs'
  }, {
      id: 'hive 计算'
  }, {
      id: 'report'
  }],
    edges: [{
      source: '收集日志',
      target: '入 es 集群'
  }, {
      source: '收集日志',
      target: '入 hdfs'
  }, {
      source: '入 hdfs',
      target: 'hive 计算'
  }, {
      source: '入 es 集群',
      target: 'hive 计算'
  }, {
      source: 'hive 计算',
      target: 'report'
  }]
  };
  var g = new dagre.graphlib.Graph();
  g.setDefaultEdgeLabel(function() {
    return {};
  });
  g.setGraph({
    rankdir: 'TB'
  });
  data.nodes.forEach(function(node) {
    node.label = node.id;
    g.setNode(node.id, {
      width: 150,
      height: 50
    });
  });
  data.edges.forEach(function(edge) {
    g.setEdge(edge.sour.........完整代码请登录后点击上方下载按钮下载查看