如何实现AWS Comprehend Medical控制台同款带关联箭头的UI？

我之前在做医疗文本实体可视化的时候也碰到过一模一样的需求，试过不少库，最后总结出几个靠谱的方案，分享给你：

方案一：原生SVG + 自定义定位逻辑 #

这是最灵活的方案，完全可控，不需要依赖第三方复杂库，适合医疗文本这种需要精准关联的场景：

• 第一步：给每个标记后的实体元素添加唯一的data-id或者id属性，方便后续获取位置
• 第二步：在页面底部添加一个全屏的SVG容器（设置position: absolute; top:0; left:0; pointer-events: none;，避免遮挡交互）
• 第三步：通过getBoundingClientRect()获取两个关联元素的位置坐标，计算出连线的起点、终点，以及标签的居中位置
• 第四步：用SVG的<line>或<path>绘制连线（可以加箭头标记），用<text>添加关联标签

举个React里的简单示例片段：

import { useEffect, useRef } from 'react';

const EntityConnector = ({ connections }) => {
  const svgRef = useRef(null);

  useEffect(() => {
    if (!svgRef.current || connections.length === 0) return;

    const svg = svgRef.current;
    svg.innerHTML = '';

    connections.forEach(conn => {
      const startEl = document.querySelector(`[data-id="${conn.startId}"]`);
      const endEl = document.querySelector(`[data-id="${conn.endId}"]`);
      if (!startEl || !endEl) return;

      const startRect = startEl.getBoundingClientRect();
      const endRect = endEl.getBoundingClientRect();

      // 计算连线起点（元素右侧中间）和终点（元素左侧中间）
      const startX = startRect.right + 5;
      const startY = startRect.top + startRect.height / 2;
      const endX = endRect.left - 5;
      const endY = endRect.top + endRect.height / 2;

      // 绘制连线
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', startX);
      line.setAttribute('y1', startY);
      line.setAttribute('x2', endX);
      line.setAttribute('y2', endY);
      line.setAttribute('stroke', '#1a73e8');
      line.setAttribute('stroke-width', 2);
      svg.appendChild(line);

      // 绘制箭头标记
      const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
      marker.setAttribute('id', `arrow-${conn.id}`);
      marker.setAttribute('viewBox', '0 0 10 10');
      marker.setAttribute('refX', '8');
      marker.setAttribute('refY', '5');
      marker.setAttribute('markerWidth', '6');
      marker.setAttribute('markerHeight', '6');
      marker.setAttribute('orient', 'auto');
      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
      path.setAttribute('fill', '#1a73e8');
      marker.appendChild(path);
      svg.appendChild(marker);
      line.setAttribute('marker-end', `url(#arrow-${conn.id})`);

      // 添加关联标签
      const midX = (startX + endX) / 2;
      const midY = (startY + endY) / 2 - 10;
      const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      text.setAttribute('x', midX);
      text.setAttribute('y', midY);
      text.setAttribute('text-anchor', 'middle');
      text.setAttribute('font-size', '12');
      text.setAttribute('fill', '#1a73e8');
      text.textContent = conn.label;
      svg.appendChild(text);
    });
  }, [connections]);

  return <svg ref={svgRef} style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none' }} />;
};

方案二：使用react-connection-library #

这个React库专门用来处理DOM元素之间的连线，不需要SSR，纯客户端渲染，支持自定义连线样式和标签，比自己写SVG省不少事：

• 安装：npm install react-connection-library
• 核心用法：用Connection组件定义两个元素的关联，通过start和end属性指定元素的选择器，label属性设置关联标签，还能自定义连线的颜色、宽度等样式

示例代码：

import { Connection, ConnectorProvider } from 'react-connection-library';

const MedicalEntityView = ({ entities, connections }) => {
  return (
    <ConnectorProvider>
      {/* 你的文本标记内容，每个实体元素加上data-id */}
      <div className="clinical-text">
        {entities.map(entity => (
          <span key={entity.id} data-id={entity.id} className="entity-tag">{entity.text}</span>
        ))}
      </div>

      {/* 渲染所有关联连线 */}
      {connections.map(conn => (
        <Connection
          key={conn.id}
          start={`[data-id="${conn.startId}"]`}
          end={`[data-id="${conn.endId}"]`}
          label={conn.label}
          line={{ stroke: '#1a73e8', strokeWidth: 2 }}
          arrow={{ fill: '#1a73e8' }}
          labelStyle={{ fontSize: '12px', fill: '#1a73e8' }}
        />
      ))}
    </ConnectorProvider>
  );
};

这个库会自动处理元素的位置变化，不需要自己监听resize和滚动，非常省心。

方案三：CSS伪元素（适合简单场景） #

如果你的关联关系比较简单（比如只有一对一、箭头样式单一），可以用CSS伪元素实现，不需要JS：

• 给关联的两个元素添加父容器，用position: relative
• 用::before绘制连线，::after绘制箭头，通过transform定位
• 标签可以用额外的绝对定位元素实现

不过这个方案灵活性差，复杂的关联关系（比如交叉连线、多对多）不太适合，适合简单演示场景。

额外注意事项 #

1. 处理滚动：如果文本区域有滚动条，计算元素位置时要加上scrollTop和scrollLeft，避免箭头偏移
2. 性能优化：如果实体数量很多，建议用节流函数处理resize和滚动事件，减少重绘次数
3. 交互体验：可以给连线添加hover效果，比如高亮关联的实体，提升用户体验

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