前端 - 使用@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

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

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

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

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

自定义节点：

注册节点