概述

G6.registNodeG6.registEdge 是开发者基于 G6 进行二次开发最主要的接口,没有之一!

注册

// 注册节点
G6.registNode(name, {
  // 绘制
  draw: function(cfg, group){
    return keyShape;
  },
  // 绘制后执行
  afterDraw: function(cfg, group, keyShape){

  },
  // 获取锚点
  getAnchorPoints: function(cfg){
    return anchorPoints;
  }
});

// 注册边
G6.registNode(name, {
  // 绘制
  draw: function(cfg, group){
    return keyShape;
  },
  // 绘制后执行
  afterDraw: function(cfg, group, keyShape){

  }
});

接口如上,接下来会逐章跟大家说明。

!注意:G6 内置一些基础的节点如:矩形 rect、圆形 circle、文本 text、菱形 rhombus,一些基础的边如:直线 line、箭头 arrow、曲线 smooth、曲线箭头 smoothArrow 。建议大家在注册型(设置 name)时保留这几个字段,否则会覆盖 G6 内置的图形!内置形详见

绘制

与 G2 自定 Shape 类似,draw 是子项最终绘制的接口,决定了一个子项最终画成什么样。

容器

group 是绘图容器,其本身是一个完整的绘图引擎,通过操作我们图形库的 API,我们能在里面画出千千万万的图形!绘图 API 参见绘图库 Canvas API

实例:

image

var data = {
  "nodes": [
    {
      "shape": "customNode",
      "id": "d62d1569"
    }
  ],
  "edges": []
}

G6.registNode('customNode', {
  draw: function(cfg, group){
    group.addShape('text', {
      attrs: {
        x: 100,
        y: 100,
        fill: '#333',
        text: '我是一个自定义节点,\n有下面那个方形和我自己组成'
      }
    });
    return group.addShape('rect', {
      attrs: {
        x: 100,
        y: 100,
        width: 100,
        height: 100,
        stroke: 'red'
      }
    });
  }
});

var net = new G6.Net({
  id: 'c1',           // 容器ID
  width: 500,   // 画布宽
  height: 500, // 画布高
  grid: {
    forceAlign: true, // 是否支持网格对齐
    cell: 10          // 网格大小
  }
});
net.source(data.nodes, data.edges);
net.render();

配置项

group 使我们有画图的能力,cfg 则是绘制一个子项的配置信息。其三个视觉通道位置大小颜色和一个原始数据字段origin。一个子项的形态就由这个四个信息决定!

image

实例:

var data = {
  "nodes": [
    {
      "shape": "customNode",
      "x": 100,
      "y": 250,
      "id": "d62d1569"
    },
    {
      "shape": "customNode",
      "x": 380,
      "y": 250,
      "id": "d62s1569"
    }
  ],
  "edges": [
    {
      "shape": "customEdge",
      "source": "d62d1569",
      "id": "75ae90a8",
      "target": "d62s1569"
    }
  ]
}

G6.registNode('customNode', {
  draw: function(cfg, group){
    group.addShape('text', {
      attrs: {
        x: cfg.x-50,
        y: cfg.y-50,
        fill: '#333',
        text: '我是一个自定义节点(node)'
      }
    });
    return group.addShape('rect', {
      attrs: {
        x: cfg.x-50,
        y: cfg.y-50,
        width: cfg.size,
        height: cfg.size,
        stroke: cfg.color
      }
    });
  }
});

G6.registEdge('customEdge', {
  draw: function(cfg, group){
    group.addShape('text', {
      attrs: {
        x: (cfg.points[0].x + cfg.points[1].x)/2,
        y: (cfg.points[0].y + cfg.points[1].y)/2,

        fill: '#333',
        text: '我是一个自定义边(edge)',
        textAlign: 'center'
      }
    });
    return group.addShape('polyline', {
      attrs: {
        points: [
          [cfg.points[0].x, cfg.points[0].y],
          [cfg.points[1].x, cfg.points[1].y]
        ],
        stroke: cfg.color,
        lineWidth: cfg.size
      }
    });
  }
});

var net = new G6.Net({
  id: 'c1',       // 容器ID
  width: 500,     // 画布宽
  height: 500     // 画布高
});
net.source(data.nodes, data.edges);
net.node()
  .color('red')
  .size(100);
net.edge()
  .color('blue')
  .size(3);
net.render();

!注意:值得注意的是,绘制节点(Node)的位置信息是:cfg.xcfg.y。而边(Edge)的是 points

关键形

keyShape 是 G6 特有的概念。简单来说,keyShape 是该子项参与图形计算的关键图形。所有的击中锚点控制点都是根据关键图形生成的,所以这个形(shape)真的非常非常关键!!

比如:

image

返回 rect,则控制点参考 rect 生成!

          var data = {
              "nodes": [
                  {
                      "shape": "customNode",
                      "id": "d62d1569"
                  }
              ],
              "edges": []
          }

          G6.registNode('customNode', {
              draw: function(cfg, group){
                var text = group.addShape('text', {
                  attrs: {
                    x: 100,
                    y: 100,
                    fill: '#333',
                    text: '我是一个自定义节点,\n有下面那个方形和我自己组成'
                  }
                });
                var rect = group.addShape('rect', {
                  attrs: {
                    x: 100,
                    y: 100,
                    width: 100,
                    height: 100,
                    stroke: 'red'
                  }
                });

                return rect;
              }
          });

          net = new G6.Net({
              id: 'c1',           // 容器ID
              width: 500,   // 画布宽
              height: 500, // 画布高
              grid: {
                  forceAlign: true, // 是否支持网格对齐
                  cell: 10          // 网格大小
              }
          });
          net.source(data.nodes, data.edges);
          net.render();

image

返回 text,则控制点参考 text 生成!

          var data = {
              "nodes": [
                  {
                      "shape": "customNode",
                      "id": "d62d1569"
                  }
              ],
              "edges": []
          }

          G6.registNode('customNode', {
              draw: function(cfg, group){
                var text = group.addShape('text', {
                  attrs: {
                    x: 100,
                    y: 100,
                    fill: '#333',
                    text: '我是一个自定义节点,\n有下面那个方形和我自己组成'
                  }
                });
                var rect = group.addShape('rect', {
                  attrs: {
                    x: 100,
                    y: 100,
                    width: 100,
                    height: 100,
                    stroke: 'red'
                  }
                });

                return text;
              }
          });

          var net = new G6.Net({
              id: 'c1',           // 容器ID
              width: 500,   // 画布宽
              height: 500, // 画布高
              grid: {
                  forceAlign: true, // 是否支持网格对齐
                  cell: 10          // 网格大小
              }
          });
          net.source(data.nodes, data.edges);
          net.render();

锚点

锚点是自定义节点时一个重要的概念,它表示一个节点可以被线连接的地方。在 G6 中,我们可以通过 getAnchorPoints 方法自定义锚点,示意图如下:

G6.registNode('customNode', {
  getAnchorPoints: function(cfg, group) {
    return [
      [0.5, 1], // 上边的中点
      [1, 0.5], // 右边的中点
      [0.5, 0], // 下边的中点
      [0, 0.5]  // 左边的中点
    ];
  }
});

绘制后

通过上面的接口我们已经能定义出任何节点,但是很多时候,我们希望基于当前的基础上添加一些信息,而不是用draw方法全部重新画。这个时候我们能通过调用 afterDraw 方法在原有形基础上添加新的图形。用法如下:

G6.registNode('customRect', {
  afterDraw: function(cfg, group) {
    group.addShape('text', {
      attrs: {
        x: cfg.x-cfg.size[0]/2,
        y: cfg.y-cfg.size[1]/2,
        fill: 'red',
        text: '我是绘制(draw)节点\n后添加的文本'
      }
    });
  }
});
G6.registEdge('line', {
  afterDraw: function(cfg, group, keyShape) {
    var center = keyShape.getPoint(0.5);
    group.addShape('text', {
      attrs: {
        x: center.x,
        y: center.y,
        fill: 'blue',
        textAlign: 'center',
        text: '我是绘制(draw)边\n后添加的文本'
      }
    });
  }
});
var data = {
  source: {
    "nodes": [
      {
        "x": 100,
        "y": 210,
        "id": "node1"
      },
      {
        "x": 300,
        "y": 210,
        "id": "node2"
      }
    ],
    "edges": [
      {
        "source": "node1",
        "id": "edge1",
        "target": "node2"
      }
    ]
  }
};
var net = new G6.Net({
    id: 'c1',      // 容器ID
    width: 500,    // 画布宽
    height: 500,   // 画布高
    mode: 'none',  // 模式
    grid: {
      forceAlign: true, // 是否支持网格对齐
      cell: 10          // 网格大小
    }
  });
net.node().shape('customRect');
net.read(data);
net.render();

详解自定义节点

配置项详解

  • 位置:cfg.x, cfg.y
  • 颜色:cfg.color
  • 尺寸:cfg.size
  • 原始数据:cfg.origin

动态计算锚点

有的时候,我们并不能写死锚点,需要根据节点本身动态计算锚点的数量和位置。这意味这 draw 方法里的信息要能传到,getAnchorPoints 里,此时我们不妨在 draw 方法中计算好锚点,再存到 group 里,然后在 getAnchorPoints 时将锚点信息取出,return 回去即可。

image

Demo源码

详解自定义边

相较于自定义节点,自定义边相对比较复杂一点,这里给出一些最佳实践,以帮助用户更好的画边。

注意:由于画边相对复杂,不建议大家直接复写 draw 方法。

配置项详解

  • 边控制点:points // 理论上 points 可以有无穷多个点,从 points[0] 到 points[n],依次是源节点到目标节点的控制点位置。
  • 目标节点: cfg.target // 目标节点 详见:Node API
  • 源节点:cfg.source // 源节点 详见:Node API
  • 颜色:cfg.color
  • 尺寸:cfg.size
  • 原始数据:cfg.origin

自定义箭头

自定义箭头是常见的需求,但这个需求看似简单,真正实现起来却没那么简单。目前 G6 里还没有提供十分便捷的添加箭头的方式,只提供了一个比较基础的工具方法,若有自定义箭头的需求,不妨使用。

Demo源码