g6js实现ER图示例代码-html代码-BFW代码库

g6js实现ER图示例代码

代码语言：html

所属分类：图表

代码描述：g6js实现ER图示例代码，这里演示的是g6的v3.1.0版本。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ER图</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>
  G6.registerEdge('relation', {
    draw: function draw(cfg, group) {
      var keyShape = group.addShape('path', {
        attrs: {
          path: [['M', cfg.startPoint.x, cfg.startPoint.y], ['L', cfg.endPoint.x, cfg.endPoint.y]],
          stroke: '#666',
          lineWidth: 2,
          lineAppendWidth: 4
        }
      });
      var center = keyShape.getPoint(0.5);
      var shapeContainer = group.addGroup();

      var point = G6.Util.getLabelPosition(keyShape, 0, 10, 4, true);
      group.addShape('text', {
        attrs: {
          text: cfg.sourceEntity,
          x: point.x,
          y: point.y,
          rotate: point.rotate,
          fill: '#666'
        }
      });
      point = G6.Util.getLabelPosition(keyShape, 1, -15, 4, true);
      group.addShape('text', {
        attrs: {
          text: cfg.targetEntity,
          x: point.x,
          y: point.y,
          fill: '#666',
          rotate: point.rotate
        }
      });
      shapeContainer.transform([['t', -center.x, -center.y], ['r', point.angle], ['t', center.x, center.y]]);
      shapeContainer.addShape('path', {
        attrs: {
          path: [['M', center.x - 40, center.y], ['L', center.x, center.y - 20], ['L', center.x + 40, center.y], ['L', center.x, center.y + 20], ['Z']],
          fill: '#fff',
          stroke: '#666'
        }
      });
      shapeContainer.addShape('text', {
        attrs: {
          text: cfg.relation,
          x: center.x,
          y: center.y,
          textAlign: 'center',
          textBaseline: 'middle',
          fill: '#666'
        }
      });
      return keyShape;
    }
  });
  var graph = new G6.Graph({
    container: 'mountNode',
    width: 800,
    height: 500,
    modes: {
      default: ['drag-node', 'drag-canvas', 'zoom-canvas']
    }
  });
  var data = {
    nodes: [{
      id: 'customer',
      label: 'customer',
      x: 200,
      y: 200,
      shape: 'rect',
      size: [60, 40]
  }, {
      id: 'customer_id',
      label: 'customer_id',
      x: 120,
      y: 160,
      shape: 'ellipse',
      size: [80, 40]
  }, {
      id: 'name',
      label: 'name',
      x: 140,
.........完整代码请登录后点击上方下载按钮下载查看