曲线上的文本 - 标签跟随曲线路径

曲线路径文本标签

功能概述

本示例演示沿节点之间曲线路径的文本标签。文本不是直线标签，而是沿着连接的曲线流动，为有机或曲线布局创建更自然和视觉上吸引人的图表。

核心特性实现

曲线连线文本

const graphOptions: RGOptions = {
    defaultLineShape: RGLineShape.BezierCurve,
    defaultLineTextOnPath: true,
    // 文本跟随曲线路径
};

自定义 SVG 文本路径

const CurvedLineText: React.FC<RGLineSlotProps> = ({ line }) => {
    const pathData = `M${line.x1},${line.y1} Q${(line.x1 + line.x2) / 2},${(line.y1 + line.y2) / 2 - 50} ${line.x2},${line.y2}`;

    return (
        <g>
            <path d={pathData} stroke="#ccc" fill="none" />
            <text>
                <textPath href={`#path-${line.id}`}>
                    {line.text}
                </textPath>
            </text>
            <defs>
                <path id={`path-${line.id}`} d={pathData} />
            </defs>
        </g>
    );
};

创意使用场景

有机流程流：自然外观的工作流图。

思维导图：带有流动文本标签的曲线分支。

生物途径：代谢或信号途径可视化。

创意图表：艺术信息图表和插图。

地理地图：标签跟随路径的弯曲路线。