元素-标签-文本省略-CSDN博客

标签 | G6 图可视化引擎复制https://g6.antv.antgroup.com/examples/element/label#ellipsis

data部分，这里参考元素-标签-复制的示例，将 label 设置在data.label中，方便plugins tooltip 的调用

const data = {
  nodes: [
    {
      id: 'node-1',
      // 参考 https://g6.antv.antgroup.com/examples/element/label/#copy
      // 将 data.label 设置在数据data中，方便plugins tooltip 的调用
      data: {
        label: 'A This label is too long to be displayed.'
      },
      style: {
        x: 100,
        y: 150,
        size: 100
      }
    },
    {
      id: 'node-2',
      data: {
        label: 'B This label is too long to be displayed.'
      },
      style: {
        x: 400,
        y: 150,
        size: 150
      }
    },
  ],
  edges: [
    {
      source: 'node-1',
      target: 'node-2',
      data: {
        label: 'C This label is too long to be displayed.'
      },
    }
  ]
}

【完整代码附注】

// https://g6.antv.antgroup.com/examples/element/label/#ellipsis

import { Graph } from "@antv/g6";

const data = {
  nodes: [
    {
      id: 'node-1',
      // 参考 https://g6.antv.antgroup.com/examples/element/label/#copy
      // 将 data.label 设置在数据data中，方便plugins tooltip 的调用
      data: {
        label: 'A This label is too long to be displayed.'
      },
      style: {
        x: 100,
        y: 150,
        size: 100
      }
    },
    {
      id: 'node-2',
      data: {
        label: 'B This label is too long to be displayed.'
      },
      style: {
        x: 400,
        y: 150,
        size: 150
      }
    },
  ],
  edges: [
    {
      source: 'node-1',
      target: 'node-2',
      data: {
        label: 'C This label is too long to be displayed.'
      },
    }
  ]
}

const graph = new Graph(
  {
    container: 'container',
    data,
    node: {
      style: {
        labelPlacement: 'bottom',
        labelText: (d) => d.data.label,
        labelWordWrap: true,
        labelMaxWidth: '90%',
        labelBackground: true,
        labelBackgroundFill: 'hotpink',
        labelBackgroundRadius: 10,
        labelFill: '#fff',
        labelFontSize: 18
      }
    },
    edge: {
      style: {
        labelOffsetY: -16,
        labelTextBaseline: 'bottom',
        labelText: (d) => d.data.label,
        labelWordWrap: true,
        labelMaxWidth: '80%',
        labelBackground: true,
        labelBackgroundFill: 'purple',
        labelBackgroundRadius: 10,
        labelFill: '#fff',
        labelFontSize: 16
      }
    },
    behaviors: ['drag-element'],
    plugins: [
      {
        // 自定义tooltip
        type: 'tooltip',
        getContent: (e, items) => {
          let result = `<h4 style="font-size: 32px;">Node Label:</h4>`
          items.forEach((item) => {
            result += `<p style="margin: 32px 0;">${item.data.label}</p>`
          })
          return result
        }
      }
    ]
  }
)

graph.render()

项目的创建参考 G6 详细教程，注意，node版本需要：required: { node: '>=18' }

详细教程 | G6 图可视化引擎本教程将引导你从头开始完成一个 G6 图表开发，并在过程中了解和学习 G6 的主要概念。https://g6.antv.antgroup.com/manual/getting-started/step-by-step