Reaviz库BubbleChart气泡图标签使用\n或<br/>换行失败问题咨询

• Reaviz BubbleChart的标签默认使用SVG <text> 元素渲染，原生SVG文本不支持自动识别\n转义字符换行，也无法解析HTML <br/> 标签
• 原代码存在两个基础错误：
  1. 导入语句错误：key和data不是Reaviz的导出项，属于自定义字段不需要引入
  2. 数据源key字段的模板字符串写法语法错误，直接拼接<br/>属于非法语法会触发报错

核心是自定义标签渲染逻辑，将带换行标记的文本拆分为多个SVG <tspan> 元素逐行渲染，完整可运行代码如下：

import React from 'react';
import { BubbleChart } from 'reaviz';

// 自定义支持换行的气泡标签组件
const CustomBubbleLabel = ({ text, ...rest }) => {
  const lines = text.split('\n');
  return (
    <text {...rest} textAnchor="middle" fill="#fff" fontSize={12}>
      {lines.map((line, i) => (
        <tspan
          key={i}
          x={0}
          dy={i === 0 ? 0 : '1.2em'} // 首行不偏移，后续行按行高向下偏移
        >
          {line}
        </tspan>
      ))}
    </text>
  );
};

export default function Bubble1() {
  // 修正数据源，统一用\n作为换行标记
  const longData = [
    { key: '48% \n expect 100 bps', data: 800 },
    { key: '14% \n expect 75 bps', data: 250 },
    { key: '40% \n by 100%', data: 400 }
  ];
  return (
    <div>
      <BubbleChart
        data={longData}
        height={450}
        width={450}
        // 传入自定义标签组件
        label={(props) => <CustomBubbleLabel text={props.data.key} {...props} />}
      />
    </div>
  );
}

• 可以修改CustomBubbleLabel里的fontSize、fill属性调整标签文字样式
• 修改<tspan>的dy属性值调整行间距
• 如果需要更大的展示空间，可以调整BubbleChart的padding属性缩小气泡尺寸，预留更多标签位置

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