g6js实现自定义流程图示例代码-html代码-BFW代码库

g6js实现自定义流程图示例代码

代码语言：html

所属分类：图表

代码描述：g6js实现自定义流程图示例代码，这里演示的是g6的v4.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/dagre.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;
  };

  /**
   * 本案例演示如何使用G6自定义流程图：
   * 1、如何使用G6绘制流程图；
   * 2、如何在贝塞尔曲线上面自定义icon；
   * 3、如何响应贝塞尔曲线上icon的点击事件。
   * 
   * by 一之
   * 
   */

  /**
   * node 特殊属性
   */
  var nodeExtraAttrs = {
    begin: {
      fill: "#9FD4FB"
    },
    end: {
      fill: "#C2E999"
    }
  };

  var data = {
    nodes: [{
      id: "1",
      label: "请求回放1（开始）",
      type: "begin"
  }, {
      id: "2",
      label: "交易创建"
  }, {
      id: "3",
      label: "请求回放3"
  }, {
      id: "4",
      label: "请求回放4"
  }, {
      id: "5",
      label: "请求回放5"
  }, {
      id: "6",
      label: "请求回放6"
  }, {
      id: "7",
      label: "请求回放2（结束）",
      type: "end"
  }],
    edges: [{
      source: "1",
      target: "2"
  }, {
      source: "1",
      target: "3"
  }, {
      source: "2",
      target: "5"
  }, {
      source: "5",
      target: "6"
  }, {
      source: "6",
      target: "7"
  }, {
      source: "3",
      target: "4"
  }, {
      source: "4",
      target: "7"
  }]
  };

  /**
   * 自定义节点
   */
  G6.registerNode("node", {
    drawShape: function drawShape(cfg, group) {
      var rect = group.addShape("rect", {
        attrs: _extends({
          x: -75,
          y: -25,
          width: 150,
          height: 50,
          radius: 4,
          fill: "#FFD591",
          fillOpacity: 1
        }, nodeExtraAttrs[cfg.type])
      });
      return rect;
    },
    // 设置状态
    setState: function setState(name, value, item) {
      var group = item.getContainer();
      var shape = group.get("children")[0]; // 顺序根据 draw 时确定

      if (name === "selected") {
        if (value) {
          shape.attr("fill", "#F6C277");
        } else {
          shape.attr("fill", "#FFD591");
        }
      }
    },

    getAnchorPoints: function getAnchorPoints() {
      return [[0, 0.5], [1, 0.5]];
    }
  }, "single-shape");

  /**
   * 自定义 edge 中心关系节点
   */
  G6.registerNode("statusNode", {
    drawShape: function drawShape(cfg, group) {
      var circle = group.addShape("circle", {
        attrs: {
          x: 0,
          y: 0,
          r: 6,
          fill: cfg.active ? "#AB83E4" : "#ccc"
        }
      });
      return circle;
    }
  }, "single-shape");

  /**
   * 自定义带箭头的贝塞尔曲线 edge
   */
  G6.registerEdge("line-with-arrow", {
    itemType: "edge",
    draw: function draw(cfg, grou.........完整代码请登录后点击上方下载按钮下载查看