react-minimal-pie-chart 尝试创建自定义 svg 标签时，所有标签都呈现在同一位置

【问题标题】：react-minimal-pie-chart when trying to create custom svg label, all labels are rendering on same positionreact-minimal-pie-chart 尝试创建自定义 svg 标签时，所有标签都呈现在同一位置
【发布时间】：2021-03-26 19:55:05
【问题描述】：

我正在使用react-minimal-pie-chart 尝试创建自定义 svg 标签时，所有标签都呈现在同一位置

const Element = (props) => {
  return (
    <text
      dominant-baseline="central"
      x="50"
      y="50"
      dx="19.151111077974452"
      dy="16.06969024216348"
      text-anchor="middle"
      style={{ fontSize: "10px" }}
    >
      <tspan x="50" dy="1.2em">
        {`${Math.round(props.percentage)} %`}
      </tspan>
      <tspan x="0" dy="1.2em">
        {props.title}
      </tspan>
    </text>
  );
};
<PieChart
              data={[
                { title: "Excellent", value: 10, color: "#8dcd81" },
                { title: "Good", value: 15, color: "#eefa6b" },
                { title: "Weak", value: 20, color: "#FF6382" },
              ]}
              label={({ dataEntry }) => <Element {...dataEntry} />}
            />

我希望它看起来像这样：-

我可以为上述 svg 代码做些什么来解决这个问题？

【问题讨论】：

你必须使 tspan 上的 x 和 dy 动态
@Danny'365CSI'Engelman 我怎样才能做到这一点

标签： reactjs svg pie-chart

【解决方案1】：

我是react-minimal-pie-chart 维护者。

正如@danny-365csi-engelman 所说，您应该为自定义tspan 元素提供动态x、y、dx 和dy 值。

label 渲染道具接受带有signature described here 的函数。您可以将 x、y、dx、dy 值传递给自定义 svg 元素。

类似：

label={({ x, y, dx, dy, dataEntry }) => (
  <text
    x={x}
    y={y}
    dx={dx}
    dy={dy}
    dominant-baseline="central"
    text-anchor="middle"
    style={}
  >
    {`${Math.round(dataEntry.value)} %`}
  </text>
)}

【讨论】：