var dataObj = {
        nodes: [],
        edges: [],
    };

    for (var i = 0; i < 1500; i++) {
        var nodesObj = {
            "shape": "table",
            "x": Math.floor(Math.random() * 9999),
            "y": Math.floor(Math.random() * 9999),
            "id": "d62q1519",
            "title": "Division",
            "type": "B",
            "fields": [
                {
                    "name": "Employee number",
                    "type": "Numberic(5)",
                    "key": "<pk>"
                },
                {
                    "name": "Emp_Employee number",
                    "type": "Numberic(5)",
                    "key": "<fk1>"
                },
                {
                    "name": "Division",
                    "type": "Numberic(5)",
                    "key": "<fk2>"
                },
                {
                    "name": "FirstName",
                    "type": "Chart(30)",
                    "key": ""
                }
            ]
        };
        var edgesObj = {
            "shape": "arrow",
            "source": "d62d1569",
            "id": "d6cb23c5",
            "target": "d62d1519",
            "controlPoints": [
                {
                    "x": Math.floor(Math.random() * 9999),
                    "y": Math.floor(Math.random() * 9999)
                },
                {
                    "x": Math.floor(Math.random() * 9999),
                    "y": Math.floor(Math.random() * 9999)
                },
                {
                    "x": Math.floor(Math.random() * 9999),
                    "y": Math.floor(Math.random() * 9999)
                }
            ],
            "relation": "service",
            "sourceAnchor": 2
        };
        edgesObj.source = edgesObj.target = nodesObj.id = Math.random().toString(36).substr(2);
        edgesObj.id = Math.random().toString(36).substr(2);

        dataObj.nodes.push(nodesObj);
        dataObj.edges.push(edgesObj);
    }

    var Util = G6.Util;
    G6.registNode('table', {
        draw: function (cfg, group) {
            var x = cfg.x;
            var y = cfg.y;
            var origin = cfg.origin;
            var fields = origin.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: origin.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: 900,         // 画布高
        fitView: 'autoZoom', // 自动缩放
        grid: {
            cell: 10           // 网格大小
        }
    });
    net.source(dataObj.nodes, dataObj.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();
});`

nameGroup.addShape('text', {
  attrs:{
    x: x,
    y: y + 20 * i,
    text: field.name,
    fill: '#333',
    textBaseline: 'top'
  }
});

或

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

G6.registNode("compositeNode", {
  draw: function(cfg, group) {
    var shape = group.addShape("rect", {
      attrs: {
        x: cfg.x - 60,
        y: cfg.y - 30,
        width: 120,
        height: 60,
        fill: "#fff",
        stroke: "lightblue"
      }
    });
    group.addShape("rhombus");
    group.addShape("text", {
      attrs: {
        x: cfg.x,
        y: cfg.y,
        fill: "black",
        text: "自定义图形",
        textAlign: "center"
      }
    });
    return shape;
  },
  getAnchorPoints: function() {
    return [[0.5, 0], [1, 0.5], [0.5, 1], [0, 0.5]];
  }
});

我想组合一个自定义节点里面有矩形和菱形。但是这样会报错

Uncaught TypeError: u[r] is not a constructor

把 group.addShape("rhombus"); 去掉就好了

codepen demo

function openEdit() {
  console.log('进入编辑模式');

  net.changeMode('edit');
  net.removeBehaviour('shortcut', 'edit');
  net.removeBehaviour('clickActive', 'edit');
}

但是双击画布以后还是会报错。
或者麻烦告诉我你们默认设置的“edit”模式都包括什么行为？我自定义一下“modes”字段。

var Layout = G6.Layout;
var margin = 60;
var height = 800 - 2 * margin;
var width = 500 - 2 * margin;
var nodes = data.nodes;
var edges = data.edges;
var layout = new Layout.Flow({
  nodes: nodes,
  edges: edges
});
nodes = layout.getNodes();
nodes.map(function(node) {
  var x = node.x * width + margin;
  var y = node.y * height + margin;
  node.x = y;
  node.y = x;
});

npm install @antv/g6

// 注册一个路由器的图标
G6.registNode('router', {
  draw: function(cfg, group) {
    group.addShape('path', {
      attrs: {
        path: 'M0 12.3 V28.9 A 24.9 11.0 0 1 0 49.8 28.9 V12.3 Z',
        fill: '#dbdde1'
      }
    });
    group.addShape('ellipse', {
      attrs: {
        x: 24.9,
        y: 12.3,
        rx: 24.9,
        ry: 12.3,
        fill: '#e2e4e9'
      }
    });
    group.addShape('ellipse', {
      attrs: {
        x: 24.9,
        y: 12.3,
        rx: 23.5,
        ry: 11.6,
        fill: '#eeeff2'
      }
    });
    group.addShape('path', {
      attrs: {
        path: 'M2.3,10.1 L4.6,7.9 L16.5,9.6 L17.7,8.6 L20.5,11.7 L12.4,13.5 L13.6,12.2Z M24.8,10.0 L28.3,6.9 L26.4,6.4 L34.6,4.3 L34.1,7.6 L31.7,7.4 L27.9,11.1Z M28.0,12.7 L35.7,11.4 L34.6,12.5 L46.0,14.8 L43.8,16.9 L31.7,14.1 L29.6,16.2Z M20.7,13.9 L24.3,14.5 L20.0,18.5 L22.6,19.3 L14.6,20.8 L14.3,17.2 L16.5,17.7Z',
        fill: '#e85464'
      }
    });
    return group.addShape('rect', {
      attrs: {
        x: 0,
        y: 0,
        width: 49.8,
        height: 40
      }
    });
  },
  afterDraw: function(cfg, group, router) {
    cfg.size = 10
    group.addShape('text', {
      attrs: {
        x: 20,
        y: 51.3,
        fontFamily: '宋体',
        text: cfg.label,
        stroke: '#000',
        textAlign: 'center'
      }
    });
  },
  getAnchorPoints: function(cfg, group) {
    return [
      [0.5, 1], // 上面边的中点
      [1, 0.5], // 右边边的中点
      [0.5, 0], // 下边边的中点
      [0, 0.5] // 左边边的中点
    ]
  }
});

然后我渲染的数据如下：

var nodes = [
  {
    "id": "595b5e7e1d41c86f00adc371",
    "name": "switch_center",
    "host_id": "switch_center",
    "node_ip": "10.10.2.1",
    "node_type": "05401202",
    "linked": "1",
    "weight": 40,
    "y": 358.36920299208396,
    "x": 636.8554312518343,
    "shape": "router"
  },
  .....
]