@antv/g6 自定义节点，来处理不同的场景

先看一下官网的自定义节点处理：

G6 自定义节点事例

这里面用了一个G6.registerNode。G6自定义节点方法

G6 三个参数说明

这个方法有三个参数，查看以下的说明图片：

1、nodeName:节点名称，这个定义的名称就是节点实例中的type，上面这个叫card-node，那么我们在引用这个自定义节点的时候只要

 let node = {

   属值：值, 
   type:'card-node'
 }

这样就可以了。

G6 而这里面自定义组件中图形 Shape 及其属性。

2、options：自定义节点配制项，定义节点、文本等等

然后我们fork一下事例，查看一下实例运行的效果，并且修改下。

先看一下颜色：

对应的数据中是这样设置的：

然后我们看一下结构的定义：

再往下就是内容了：

多行显示的原理其实就是加入\n来处理，string1 \n string2，根据字符串长度+字体大小+每行最多显示的宽度来比对进行处理。这里可以任意修改，只要知道\n来换行就可以了。

const fittingString = (str, maxWidth, fontSize) => {
  let currentWidth = 0;
  let res = str;
  const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
  str.split('，').forEach((letter, i) => {
    if (currentWidth > maxWidth) return;
    if (pattern.test(letter)) {
      // Chinese charactors
      currentWidth += fontSize;
    } else {
      // get the width of single letter according to the fontSize
      currentWidth += G6.Util.getLetterWidth(letter, fontSize);
    }
    if (currentWidth > maxWidth) {
      res = `${str.substr(0, i)}\n${str.substr(i)}`;
    }
  });
  return res;
};

G6 使用换行符处理文本超长。

3、extendNodeName: 基于内置节点进行定义，其实就是节点继承。

G6 提供了一系列内置节点，包括 circle、rect、diamond、triangle、star、image、modelRect。

G6自定义节点有详细说明

这样我们就对G6自定义节点有大概的了解了。