<text> 的旋转不会在其位置旋转答案

【问题标题】：Rotation of <text> doesn't rotate at its position<text> 的旋转不会在其位置旋转
【发布时间】：2019-07-10 20:15:56
【问题描述】：

我正在尝试实现this Piechart，但我想在不旋转的情况下旋转它，然后将其文本重新旋转为水平。问题是它没有在它的位置居中。我已经尝试转换原点中心。

旋转后的样子：

我希望它看起来如何

这是我的代码：

const data= [
    {
      name: props.language == "CP",
      value: 300
    },
    {
      name: props.language == "CP",
      value: 300
    }
  ];

const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({
  cx,
  cy,
  midAngle,
  innerRadius,
  outerRadius,
  percent,
  index,
  name
}) => {
  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
  const x = cx + radius * Math.cos(-midAngle * RADIAN);
  const y = cy + radius * Math.sin(-midAngle * RADIAN);
  console.log(cx, cy, midAngle, innerRadius, outerRadius, RADIAN, radius);
  return (
    <text
       style={{ WebkitTransform: "rotate(90deg)", transformOrigin: "center" }}
      x={x}
      y={y}
      fill="white"
      textAnchor={x > cx ? "start" : "end"}
      dominantBaseline="central"
    >
      {name}
    </text>
  );
};
     <div style={{ width: "100%", height: 310 }} className="rotate">
            <ResponsiveContainer>
              <PieChart>
                <Pie
                  data={data}
                  labelLine={false}
                  label={renderCustomizedLabel}
                  fill="#0eb89a"
                  dataKey="value"
                />
                </PieChart>
            </ResponsiveContainer>

css:

.rotate {
  background-color: transparent;
  transform: rotate(270deg);
  margin: auto;
}

【问题讨论】：

截图没用，设置一个sn-p来重现您的问题，以便我们回答。基本上：容器和文本可能需要相反的旋转才能让文本可读还是关于变换原点？

标签： css reactjs svg recharts

【解决方案1】：

我会使用 svg transform 文本节点，而不是使用 x 和 y 属性定位它们。

const { PieChart, Pie, Sector, Cell } = Recharts;
const data = [{name: 'Group A', value: 400}, {name: 'Group B', value: 300},
                  {name: 'Group C', value: 300}, {name: 'Group D', value: 200}];
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

const RADIAN = Math.PI / 180;                    
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
  const x  = cx + radius * Math.cos(-midAngle * RADIAN);
  const y = cy  + radius * Math.sin(-midAngle * RADIAN);

  return (
    <text transform={`translate(${x},${y}) rotate(45)`}  fill="white" textAnchor={`middle`}     dominantBaseline="central">
        {`${(percent * 100).toFixed(0)}%`}
    </text>
  );
};

const SimplePieChart = React.createClass({
    render () {
    return (
        <PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>
        <Pie
          data={data} 
          cx={300} 
          cy={200} 
          labelLine={false}
          label={renderCustomizedLabel}
          outerRadius={80} 
          fill="#8884d8"
        >
            {
            data.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]}/>)
          }
        </Pie>
      </PieChart>
    );
  }
})

ReactDOM.render(
  <SimplePieChart />,
  document.getElementById('container')
);

Fiddle

【讨论】：