使用@antv/x6，遇到节点里的文字超出宽度该怎么办？

Question

<template>
  <div id="container"></div>
</template>

<script>
import { Graph } from "@antv/x6";

const data = {
  // 节点
  nodes: [
    {
      id: "node1", // String，可选，节点的唯一标识
      x: 40, // Number，必选，节点位置的 x 值
      y: 40, // Number，必选，节点位置的 y 值
      width: 80, // Number，可选，节点大小的 width 值
      height: 40, // Number，可选，节点大小的 height 值
      label: "hellohellohellohellohellohellohellohellohello", // String，节点标签
    },
    {
      id: "node2", // String，节点的唯一标识
      shape: "ellipse", // 使用 ellipse 渲染
      x: 40, // Number，必选，节点位置的 x 值
      y: 160, // Number，必选，节点位置的 y 值
      width: 80, // Number，可选，节点大小的 width 值
      height: 40, // Number，可选，节点大小的 height 值
      label: "world" // String，节点标签
    }
  ],
  // 边
  edges: [
    {
      source: "node1", // String，必须，起始节点 id
      target: "node2" // String，必须，目标节点 id
    }
  ]
};
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {};
  },
  mounted() {
    const graph = new Graph({
      container: document.getElementById("container"),
      width: 800,
      height: 600,
      background: {
        color: "#fffbe6" // 设置画布背景颜色
      },
      grid: {
        size: 10, // 网格大小 10px
        visible: true // 渲染网格背景
      }
    });
    graph.fromJSON(data);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

label: "hellohellohellohellohellohellohellohellohello", // String，节点标签
这个会超出id: "node1", // String，可选，节点的唯一标识这个宽，我又不想截断这个字符串，有没有添加 类似 popover这样的功能

Answer 1

最近的项目有用到官方基于x6封装的antv/xflow，可以参考一下，
https://xflow.antv.vision/docs/tutorial/intro/getting-started

以下是我对节点内容超出的设置，超出显示...,另外外面包裹了一个tooltip，以便于看到节点的全部内容，我也是基于官方的demo开发的，如果这不能解决你的问题，可以尝试找下x6关于自定义html节点的文档

自定义节点：

注册节点

Answer 2

没有找到正向设置属性的方式做到自适应节点宽度，使用一个反向同步将React节点大小同步到Node

import { useEffect, useRef } from 'react';
import { isEqual } from 'lodash';

import { Cell, Edge, Node } from '@antv/x6';
import { NsGraph } from '@antv/xflow';

type FrameworkNodeProps<T extends Node | Edge | Cell = Cell> =
  NsGraph.IReactNodeProps & {
    cell: T;
  };
export const CustomNode = (props: NsGraph.IReactNodeProps) => {
  const { cell } = props as FrameworkNodeProps<Node>;

  const nodeRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (!cell || !nodeRef.current) {
      return;
    }

    const cellSize = cell.getSize();
    const divSize = {
      width: nodeRef.current?.scrollWidth,
      height: nodeRef.current?.scrollHeight,
    };
    if (isEqual(divSize, cellSize)) {
      return;
    }

    cell.setSize(divSize);
  }, [nodeRef.current]);

  return (
    <div ref={nodeRef}>
      12343242
    </div>
  );
};

Answer 3

antvx6 在最新版的文档里面存在获取当前节点的size 大小