如何设置节点间距和高度适应文本行数 #4183

问题描述

<img width="607" alt="企业微信截图_95d13718-5276-4659-8db8-86cf710bcad7" src="https://user-images.githubusercontent.com/40134043/210473183-21b850ba-6242-4647-9441-87e95e86ecaa.png">

求教怎么根据节点文本的行数去设置节点间距从而不重叠，以下设置会导致重叠

代码如下

 `getHeight: (data: any) => {
          const labelWidth = G6.Util.getTextSize(data.label, 14)[0];
          const index = labelWidth / 390;
          let height;
          if (index > 1) {
            height = 21 + Math.floor(index+1) * 20
          } else {
            height = 21;
          }
          if(data.id === "166718277215354570" || data.id === "166718277215354571") {
            console.log('getsHeight', height)
          }
          return height;
        },

    getHGap: (data: any) => {
      // console.log('data', data)
      return 1 === data.hierarchy ? 12 : 2 === data.hierarchy ? 24 : 22;
    },

    getVGap: (data: any) => {
      let index;
      if (data?.label?.split) {
        const labelWidth = G6.Util.getTextSize(data.label, 14)[0];
        index = labelWidth / 390 + 1;
      } else {
        index = 1;
      }
      let val;
      if(data.hierarchy <= 2) {
        val = 24;
      } else {
        if(index > 2) {
          val = Math.floor(index) * 20
        } else {
          val = Math.floor(index) * 2
        }
      }
      if(data.id === "166718277215354570" || data.id === "166718277215354571") {
        console.log('getsVGap', val)
      }
      return val;
    },`

重现链接

无

重现步骤

无

预期行为

无

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [4.5.1 ... ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response