Guide

简介

Guide 类是导引信息类，继承于图项 Item，享有 Item 上的所有接口，本文档只介绍差异的接口，其它接口请参考 Item API 文档。

在 G6 中，导引（Guide）的定位是去画节点（Node）、边（Edge）、组（Group）以外的的元素。G6 内部例如：

示例代码片段

// 注册一个节点的  tag 信息
G6.registerGuide('tag', {
  draw(item) {
    const group = item.getGraphicGroup();
    const model = item.getModel();
    const {nodeId, label} = model;
    const graph = item.getGraph();
    const node = graph.find(nodeId);
    const nodeBox = node.getBBox();
    const dy = 32;
    const labelMargin = [8, 16];
    const labelShape = group.addShape('text', {
      attrs: {
        x: nodeBox.centerX,
        y: nodeBox.minY - dy - 8,
        text: label,
        fill: '#333',
        textAlign: 'center'
      }
    });
    const labelBox = labelShape.getBBox();
    const backRect = group.addShape('path', {
      attrs: {
        path: [
          ['M', labelBox.minX - labelMargin[1], labelBox.minY - labelMargin[0]],
          ['L', labelBox.maxX + labelMargin[1], labelBox.minY - labelMargin[0]],
          ['L', labelBox.maxX + labelMargin[1], labelBox.maxY + labelMargin[0]],
          ['L', labelBox.minX - labelMargin[1], labelBox.maxY + labelMargin[0]],
          ['Z']
        ],
        stroke: 'red'
      }
    });
    group.addShape('path', {
      attrs: {
        path: [
          ['M', nodeBox.centerX, nodeBox.minY - dy],
          ['L', nodeBox.centerX, nodeBox.minY]
        ],
        stroke: 'red',
        lineDash: [2, 2],
        endArrow: true
      }
    });
    return backRect;
  }
});