{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-55a2e827b53cc5b585baaee86e86bf3c-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

G6 提供了一系列内置节点，包括 circle、rect、ellipse、diamond、triangle、star、image、modelRect。若内置节点无法满足需求，用户还可以通过 G6.registerNode('nodeName', options) 进行自定义节点，方便用户开发更加定制化的节点，包括含有复杂图形的节点、复杂交互的节点、带有动画的节点等。

\n

在本章中我们会通过四个案例，从简单到复杂讲解节点的自定义。这四个案例是：\n
\n1. 从无到有的定义节点：绘制图形；优化性能。\n
\n2. 扩展现有的节点：附加图形；增加动画。\n
\n3. 调整节点的锚点；\n
\n4. 调整节点的鼠标选中/悬浮样式。样式变化响应；动画响应。

\n

通过 图形 Shape 章节的学习，我们应该已经知道了自定义节点时需要满足以下两点：

\n\n

G6 中自定义节点的 API 如下：

\n
G6.registerNode(\n  'nodeName',\n  {\n    options: {\n      style: {},\n      stateStyles: {\n        hover: {},\n        selected: {},\n      },\n    },\n    /**\n     * 绘制节点/边，包含文本\n     * @param  {Object} cfg 节点的配置项\n     * @param  {G.Group} group 节点的容器\n     * @return {G.Shape} 绘制的图形，通过node.get('keyShape') 可以获取到\n     */\n    draw(cfg, group) {},\n    /**\n     * 绘制后的附加操作，默认没有任何操作\n     * @param  {Object} cfg 节点的配置项\n     * @param  {G.Group} group 节点的容器\n     */\n    afterDraw(cfg, group) {},\n    /**\n     * 更新节点，包含文本\n     * @override\n     * @param  {Object} cfg 节点的配置项\n     * @param  {Node} node 节点\n     */\n    update(cfg, node) {},\n    /**\n     * 更新节点后的操作，一般同 afterDraw 配合使用\n     * @override\n     * @param  {Object} cfg 节点的配置项\n     * @param  {Node} node 节点\n     */\n    afterUpdate(cfg, node) {},\n    /**\n     * 设置节点的状态，主要是交互状态，业务状态请在 draw 方法中实现\n     * 单图形的节点仅考虑 selected、active 状态，有其他状态需求的用户自己复写这个方法\n     * @param  {String} name 状态名称\n     * @param  {Object} value 状态值\n     * @param  {Node} node 节点\n     */\n    setState(name, value, node) {},\n    /**\n     * 获取控制点\n     * @param  {Object} cfg 节点、边的配置项\n     * @return {Array|null} 控制点的数组,如果为 null，则没有控制点\n     */\n    getAnchorPoints(cfg) {},\n  },\n  extendNodeName,\n);\n
\n

  注意：

\n\n

1. 从无到有定义节点

\n

绘制图形

\n

我们自己来实现一个菱形的节点，如下图所示。

\n
\n

G6 有内置的菱形节点 diamond。为了演示，这里实现了一个自定义的菱形，相当于复写了内置的 diamond。

\n
\nimg\n
G6.registerNode('diamond', {\n  draw(cfg, group) {\n    // 如果 cfg 中定义了 style 需要同这里的属性进行融合\n    const shape = group.addShape('path', {\n      attrs: {\n        path: this.getPath(cfg), // 根据配置获取路径\n        stroke: cfg.color, // 颜色应用到边上，如果应用到填充，则使用 fill: cfg.color\n      },\n    });\n    if (cfg.label) {\n      // 如果有文本\n      // 如果需要复杂的文本配置项，可以通过 labeCfg 传入\n      // const style = (cfg.labelCfg && cfg.labelCfg.style) || {};\n      // style.text = cfg.label;\n      group.addShape('text', {\n        // attrs: style\n        attrs: {\n          x: 0, // 居中\n          y: 0,\n          textAlign: 'center',\n          textBaseline: 'middle',\n          text: cfg.label,\n          fill: '#666',\n        },\n      });\n    }\n    return shape;\n  },\n  // 返回菱形的路径\n  getPath(cfg) {\n    const size = cfg.size || [40, 40]; // 如果没有 size 时的默认大小\n    const width = size[0];\n    const height = size[1];\n    //  / 1 \\\n    // 4     2\n    //  \\ 3 /\n    const path = [\n      ['M', 0, 0 - height / 2], // 上部顶点\n      ['L', width / 2, 0], // 右侧顶点\n      ['L', 0, height / 2], // 下部顶点\n      ['L', -width / 2, 0], // 左侧顶点\n      ['Z'], // 封闭\n    ];\n    return path;\n  },\n});\n
\n

上面的代码自定义了一个菱形节点，然后我们使用下面的数据输入就会绘制出 diamond 这个节点。

\n
const data = {\n  nodes: [\n    { x: 50, y: 100, shape: 'diamond' }, // 最简单的\n    { x: 150, y: 100, shape: 'diamond', size: [50, 100] }, // 添加宽高\n    { x: 250, y: 100, color: 'red', shape: 'diamond' }, // 添加颜色\n    { x: 350, y: 100, label: '菱形', shape: 'diamond' }, // 附加文本\n  ],\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 500,\n  height: 500,\n});\ngraph.data(data);\ngraph.render();\n
\nimg\n

优化性能

\n

当图中节点或边通过 graph.update(item, cfg) 重绘时，默认情况下会调用节点的 draw 方法进行重新绘制。在数据量大或节点上图形数量非常多（特别是文本多）的情况下，draw 方法中对所有图形、赋予样式将会非常消耗性能。

\n

在自定义节点时，重写 update 方法，在更新时将会调用该方法替代 draw。我们可以在该方法中指定需要更新的图形，从而避免频繁调用 draw 、全量更新节点上的所有图形。当然，update 方法是可选的，如果没有性能优化的需求可以不重写该方法。

\n

在实现 diamond 的过程中，重写 update 方法，找到需要更新的 shape 进行更新，从而优化性能。寻找需要更新的图形可以通过：

\n\n

下面代码仅更新了 diamond 的关键图形的路径和颜色。

\n
G6.registerNode('diamond', {\n  draw(cfg, group) {\n    // ... // 见前面代码\n  },\n  getPath(cfg) {\n    // ... // 见前面代码\n  },\n  update(cfg, node) {\n    const group = node.getContainer(); // 获取容器\n    const shape = group.get('children')[0]; // 按照添加的顺序\n    const style = {\n      path: this.getPath(cfg),\n      stroke: cfg.color,\n    };\n    shape.attr(style); // 更新属性\n    // 更新文本的逻辑类似，但是需要考虑 cfg.label 是否存在的问题\n    // 通过 label.attr() 更新文本属性即可\n  },\n});\n
\n
\n

2. 扩展现有节点

\n

扩展 Shape

\n

G6 中已经内置了一些节点，如果用户仅仅想对现有节点进行调整，复用原有的代码，则可以基于现有的节点进行扩展。同样实现 diamond ，可以基于 circle、ellipse、rect 等内置节点的进行扩展。simple-shape 是这些内置节点图形的基类，也可以基于它进行扩展。

\n

下面以基于 single-shape 为例进行扩展。draw，update，setState 方法在 simple-shape 中都有实现，这里仅需要复写 getShapeStyle 方法即可。返回的对象中包含自定义图形的路径和其他样式。

\n
G6.registerNode(\n  'diamond',\n  {\n    shapeType: 'path', // group.addShape 时需要指定的类型\n    getShapeStyle(cfg) {\n      const size = this.getSize(cfg); // 转换成 [width, height] 的模式\n      const color = cfg.color;\n      const width = size[0];\n      const height = size[1];\n      //  / 1 \\\n      // 4     2\n      //  \\ 3 /\n      const path = [\n        ['M', 0, 0 - height / 2], // 上部顶点\n        ['L', width / 2, 0], // 右侧顶点\n        ['L', 0, height / 2], // 下部顶点\n        ['L', -width / 2, 0], // 左侧顶点\n        ['Z'], // 封闭\n      ];\n      const style = Util.mix(\n        {},\n        {\n          path: path,\n          stroke: color,\n        },\n        cfg.style,\n      );\n      return style;\n    },\n  },\n  // 注意这里继承了 'single-shape'\n  'single-shape',\n);\n
\n

添加动画

\n

通过 afterDraw 同样可以实现扩展，下面我们来看一个节点的动画场景，如下图所示。
\nimg

\n

上面的动画效果，可以通过以下方式实现：

\n\n

更多关于动画的实现，请参考基础动画章节。

\n
\n

3. 调整锚点 anchorPoint

\n

节点上的锚点 anchorPoint 作用是确定节点与边的相交的位置，看下面的场景：

\nimg\nimg\n
\n

（左）没有设置锚点时。（右）diamond 设置了锚点后。

\n
\n

有两种方式来调整节点上的锚点：

\n\n

      适用场景：可以为不同节点配置不同的锚点，更定制化。

\n\n

      适用场景：全局配置锚点，所有该自定义节点类型的节点都相同。

\n

数据中指定锚点

\n
const data = {\n  nodes: [\n    {\n      id: 'node1',\n      x: 100,\n      y: 100,\n      anchorPoints: [\n        [0, 0.5], // 左侧中间\n        [1, 0.5], // 右侧中间\n      ],\n    },\n    //...       // 其他节点\n  ],\n  edges: [\n    //... // 边\n  ],\n};\n
\n

自定义时指定锚点

\n
G6.registerNode(\n  'diamond',\n  {\n    //... // 其他方法\n    getAnchorPoints() {\n      return [\n        [0, 0.5], // 左侧中间\n        [1, 0.5], // 右侧中间\n      ];\n    },\n  },\n  'rect',\n);\n
\n
\n

4. 调整状态样式

\n

常见的交互都需要节点和边通过样式变化做出反馈，例如鼠标移动到节点上、点击选中节点/边、通过交互激活边上的交互等，都需要改变节点和边的样式，有两种方式来实现这种效果：

\n
    \n
  1. 在数据上添加标志字段，在自定义 shape 过程中根据约定进行渲染；
    2. \n
  2. 将交互状态同原始数据和绘制节点的逻辑分开，仅更新节点。
    3. \n
\n

我们推荐用户使用第二种方式来实现节点的状态调整，可以通过以下方式来实现：

\n\n

基于 rect 扩展出一个 custom 图形，默认填充色为白色，当鼠标点击时变成红色，实现这一效果的示例代码如下：

\n
// 基于 rect 扩展出新的图形\nG6.registerNode(\n  'custom',\n  {\n    // 设置状态\n    setState(name, value, item) {\n      const group = item.getContainer();\n      const shape = group.get('children')[0]; // 顺序根据 draw 时确定\n      if (name === 'selected') {\n        if (value) {\n          shape.attr('fill', 'red');\n        } else {\n          shape.attr('fill', 'white');\n        }\n      }\n    },\n  },\n  'rect',\n);\n\n// 点击时选中，再点击时取消\ngraph.on('node:click', ev => {\n  const node = ev.item;\n  graph.setItemState(node, 'selected', !node.hasState('selected')); // 切换选中\n});\n
\n

G6 并未限定节点的状态，只要你在 setState 方法中进行处理你可以实现任何交互，如实现鼠标放到节点上后节点逐渐变大的效果。
\nimg

\n
G6.registerNode(\n  'custom',\n  {\n    // 设置状态\n    setState(name, value, item) {\n      const group = item.getContainer();\n      const shape = group.get('children')[0]; // 顺序根据 draw 时确定\n      if (name === 'running') {\n        if (value) {\n          shape.animate(\n            {\n              r: 20,\n              repeat: true,\n            },\n            1000,\n          );\n        } else {\n          shape.stopAnimate();\n          shape.attr('r', 10);\n        }\n      }\n    },\n  },\n  'circle',\n);\n\n// 鼠标移动到上面 running，移出结束\ngraph.on('node:mouseenter', ev => {\n  const node = ev.item;\n  graph.setItemState(node, 'running', true);\n});\n\ngraph.on('node:mouseleave', ev => {\n  const node = ev.item;\n  graph.setItemState(node, 'running', false);\n});\n
"}