G6 - 数据库设计

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>数据库设计</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script type="text/javascript">
$.getJSON('../../../static/data/dataBase.json', function(data){
  var Util = G6.Util;
  G6.registNode('table', {
    draw: function(cfg, group){
      var x = cfg.x;
      var y = cfg.y;
      var model = cfg.model;
      var fields = model.fields;
      var backRect = group.addShape('rect', {
        attrs: {
          stroke: 'blue',
          fill: cfg.color
        }
      });
      var nameGroup = group.addGroup();
      var typeGroup = group.addGroup();
      var keyGroup = group.addGroup();
      var lineHeight = 20;
      var marginRight = 10;
      var padding = 6;
      var l = fields.length;
      var fontHeight;
      var anchorPoints = [];
      var title;
      var titleBox;
      var nameBox;
      var typeBox;
      var keyBox;
      var width;
      var height;
      var splitLine;

      title = group.addShape('text', {
        attrs: {
          x: x,
          y: y,
          text: model.title,
          fill: '#333',
          textBaseline: 'top',
          textAlign: 'center'
        }
      });

      splitLine = group.addShape('line', {
        attrs: {
          stroke: '#fff'
        }
      });

      Util.each(fields, function(field, i){
        nameGroup.addShape('text', {
          attrs:{
            x: x,
            y: y + 20 * i,
            text: field.name,
            fill: '#333',
            textBaseline: 'top'
          }
        });
        typeGroup.addShape('text', {
          attrs:{
            x: x,
            y: y + 20 * i,
            text: field.type,
            fill: '#333',
            textBaseline: 'top'
          }
        });
        keyGroup.addShape('text', {
          attrs:{
            x: x,
            y: y + 20 * i,
            text: field.key,
            fill: '#333',
            textBaseline: 'top'
          }
        });
      });
      titleBox = title.getBBox();
      nameBox = nameGroup.getBBox();
      typeBox = typeGroup.getBBox();
      keyBox = keyGroup.getBBox();
      width = nameBox.width + typeBox.width + keyBox.width + 3 * marginRight + 2*padding;
      height = Math.max(nameBox.height, typeBox.height, keyBox.height) + 4 * padding + titleBox.height;
      fontHeight = nameGroup.get('children')[0].getBBox().height;

      title.translate(0, -height/2 + padding);
      nameGroup.translate(-width/2 + padding, -height/2 + titleBox.height + 3 * padding);
      typeGroup.translate(-width/2 + nameBox.width + marginRight + padding, -height/2 + titleBox.height + 3 * padding);
      keyGroup.translate(-width/2 + nameBox.width + typeBox.width + 2 * marginRight + padding, -height/2 + titleBox.height + 3 * padding);
      splitLine.attr({
        x1: cfg.x - width/2,
        y1: cfg.y - height/2 + 2 * padding + titleBox.height,
        x2: cfg.x + width/2,
        y2: cfg.y - height/2 + 2 * padding + titleBox.height
      });
      backRect.attr({
        x: x-width/2,
        y: y-height/2,
        width: width,
        height: height,
        stroke: 'blue',
        fill: cfg.color
      });
      Util.each(fields, function(field, i){
        var r = ( titleBox.height + i*(nameBox.height + lineHeight - fontHeight)/l + fontHeight/2 + 3 * padding)/height;
        anchorPoints.push([0, r]);
        anchorPoints.push([1, r]);
      });
      group.set('anchorPoints', anchorPoints);
      return backRect;
    },
    getAnchorPoints: function(cfg, group){
      var anchorPoints = group.get('anchorPoints');
      anchorPoints.unshift([0.5, 0]);   // 上中
      anchorPoints.push([0.5, 1]);      // 下中
      return anchorPoints;
    }
  });
  var net = new G6.Net({
    id: 'c1',            // 容器ID
    height: 450,         // 画布高
    fitView: 'autoZoom', // 自动缩放
    grid: {
      cell: 10           // 网格大小
    }
  });
  net.source(data.nodes, data.edges);
  net.node().color('type', function(val){
    if(val === "B"){
      return G6.Global.colors[0];
    }
    if(val === "C"){
      return G6.Global.colors[1];
    }
  });
  net.edge().label('relation');
  net.render();
});
</script>

      </body>
    </html>
          
数据库设计
该图展示了数据库表之间的关联关系，主要向大家展示了动态锚点的使用方法。