如何在React Force Graph 2D中添加边界约束文本

一、解决文本显示在节点后方的问题 #

Canvas 没有 z-index 属性，元素层级完全由绘制顺序决定：后绘制的元素会覆盖先绘制的。只需调整节点图形与文本的绘制顺序即可解决：

• 先绘制圆形节点的填充/描边
• 再绘制文本，此时文本会自动覆盖在节点上方

在 React Force Graph 2D 中，通过 nodeCanvasObject 配置项实现自定义绘制逻辑：

<ForceGraph2D
  // 其他配置项
  nodeCanvasObject={(node, ctx, globalScale) => {
    // 1. 先绘制圆形节点
    const nodeRadius = node.radius || 20;
    ctx.beginPath();
    ctx.arc(node.x, node.y, nodeRadius, 0, 2 * Math.PI, false);
    ctx.fillStyle = node.color || '#999';
    ctx.fill();
    ctx.strokeStyle = '#333';
    ctx.stroke();

    // 2. 再绘制文本（此时文本位于节点上层）
    ctx.fillStyle = '#fff';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    // 后续添加文本适配逻辑
  }}
/>

二、实现文本不超出圆形边界 #

结合 Mike Bostock 的文本适配思路，提供两种实用方案：

方案1：动态调整字体大小（适配完整文本） #

从初始字体大小开始逐步缩小，直到文本宽度小于圆形内部可用空间（节点直径减去内边距）：

nodeCanvasObject={(node, ctx, globalScale) => {
  const nodeRadius = node.radius || 20;
  const padding = 4; // 文本与圆形边界的内边距
  const maxTextWidth = nodeRadius * 2 - padding * 2;
  const text = node.label || node.id;

  // 绘制圆形节点（同上）
  ctx.beginPath();
  ctx.arc(node.x, node.y, nodeRadius, 0, 2 * Math.PI, false);
  ctx.fillStyle = node.color || '#999';
  ctx.fill();
  ctx.strokeStyle = '#333';
  ctx.stroke();

  // 动态计算合适的字体大小
  let fontSize = 14; // 初始字体大小
  ctx.font = `${fontSize}px sans-serif`;
  while (ctx.measureText(text).width > maxTextWidth && fontSize > 6) {
    fontSize--;
    ctx.font = `${fontSize}px sans-serif`;
  }

  // 绘制适配后的文本
  ctx.fillStyle = '#fff';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, node.x, node.y);
}}

方案2：文本截断（适合长文本场景） #

如果不想缩小字体，可对超出长度的文本添加省略号，保证视觉整洁：

nodeCanvasObject={(node, ctx, globalScale) => {
  const nodeRadius = node.radius || 20;
  const padding = 4;
  const maxTextWidth = nodeRadius * 2 - padding * 2;
  let text = node.label || node.id;
  const fontSize = 14;

  // 绘制圆形节点（同上）
  ctx.beginPath();
  ctx.arc(node.x, node.y, nodeRadius, 0, 2 * Math.PI, false);
  ctx.fillStyle = node.color || '#999';
  ctx.fill();
  ctx.strokeStyle = '#333';
  ctx.stroke();

  ctx.font = `${fontSize}px sans-serif`;
  ctx.fillStyle = '#fff';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // 截断文本并添加省略号
  let truncatedText = text;
  while (ctx.measureText(truncatedText).width > maxTextWidth && truncatedText.length > 1) {
    truncatedText = truncatedText.slice(0, -1) + '…';
  }

  ctx.fillText(truncatedText, node.x, node.y);
}}

三、额外优化：多行文本适配（可选） #

如果需要支持多行文本，可将文本按换行符拆分，逐行计算高度并绘制，确保整体不超出圆形范围：

nodeCanvasObject={(node, ctx, globalScale) => {
  const nodeRadius = node.radius || 20;
  const padding = 4;
  const maxTextWidth = nodeRadius * 2 - padding * 2;
  const lines = (node.label || node.id).split('\n');
  let fontSize = 14;
  let lineHeight = fontSize * 1.2;

  // 绘制圆形节点（同上）
  ctx.beginPath();
  ctx.arc(node.x, node.y, nodeRadius, 0, 2 * Math.PI, false);
  ctx.fillStyle = node.color || '#999';
  ctx.fill();
  ctx.strokeStyle = '#333';
  ctx.stroke();

  // 调整字体大小适配多行总高度和单行宽度
  ctx.font = `${fontSize}px sans-serif`;
  const maxLineWidth = Math.max(...lines.map(line => ctx.measureText(line).width));
  const totalTextHeight = lines.length * lineHeight;
  while ((maxLineWidth > maxTextWidth || totalTextHeight > nodeRadius * 2 - padding * 2) && fontSize > 6) {
    fontSize--;
    lineHeight = fontSize * 1.2;
    ctx.font = `${fontSize}px sans-serif`;
  }

  // 逐行绘制文本，保持垂直居中
  const startY = node.y - (totalTextHeight / 2) + lineHeight / 2;
  lines.forEach((line, index) => {
    ctx.fillText(line, node.x, startY + index * lineHeight);
  });
}}

内容的提问来源于stack exchange，提问作者psygo