G6换行符处理超长文本

一、带省略号：

 

export function fittingString(str, maxWidth, fontSize) {
  const ellipsis = "...";
  const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
  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 - ellipsisLength) return;
    if (pattern.test(letter)) {
      currentWidth += fontSize;
    } else {
      currentWidth += G6.Util.getLetterWidth(letter, fontSize);
    }
    if (currentWidth > maxWidth - ellipsisLength) {
      res = `${str.substr(0, i)}${ellipsis}`;
    }
  });
  return res;
}

处理数据时在节点处使用： 

return {
                ...el,
                label: fittingString(el.label, 80, 16),
                size: size,
                style: {
                  fill: fill,
                },
  };

二、不带省略号：

 superLongTextHandle(str, maxWidth, fontSize) {
      let currentWidth = 0;
      let res = str;
      // 区分汉字和字母
      const pattern = new RegExp("[\u4E00-\u9FA5]+");
      str.split("").forEach((letter, i) => {
        if (currentWidth > maxWidth) return;
        if (pattern.test(letter)) {
          // 中文字符
          currentWidth += fontSize;
        } else {
          // 根据字体大小获取单个字母的宽度
          currentWidth += G6.Util.getLetterWidth(letter, fontSize);
        }
        if (currentWidth > maxWidth) {
          res = `${str.substr(0, i)}\n${this.superLongTextHandle(
            str.substr(i),
            maxWidth,
            fontSize
          )}`;
        }
      });
      return res;
 },

项目中使用：

return {
                ...el,
                label: superLongTextHandle(el.label, 80, 16),
                size: size,
                style: {
                  fill: fill,
                },
  };