如何在rechart中添加倒三角形散点图

Question

我正在使用 rechart 使用散点图，我正在使用散点图的形状作为“三角形”，我的要求是倒三角形。我尝试使用角度但它不起作用。任何人都可以帮助我，如何绘制倒置 traingle.May 我们可以使用矩形或路径编写自定义形状，但我是新手，请有人帮助我。

代码：

 const {ScatterChart, Scatter, XAxis, YAxis, ZAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data01 = [{x: 100, y: 200}, {x: 120, y: 0},
                ];


const ThreeDimScatterChart = React.createClass({
    render () {
    return (
        <ScatterChart width={400} height={400} margin={{top: 20, right: 20, bottom: 20, left: 20}}>
        <XAxis type="number" dataKey={'x'} name='stature' unit='cm'/>
        <YAxis type="number" dataKey={'y'} name='weight' unit='kg'/>
     
        <CartesianGrid />
        <Tooltip cursor={{strokeDasharray: '3 3'}}/>
        <Legend />
        <Scatter name='A school' data={data01} fill='#8884d8' shape="triangle"/>

      </ScatterChart>
    );
  }
})

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

谢谢

Answer 1

您应该使用多边形或您自己的 SVG 为散点图创建自定义形状。

多边形示例：

<Scatter name="A school" data={data01} fill="#8884d8" shape="<TriangleShape angle={180} />" />;

const TriangleShape = (props: any): JSX.Element => {
  return <polygon {...props} points={calcTrianglePoints(props.cx, props.cy, props.r * 2, props.angle || 0)} />;
};
/** *
 * Calc points of the triangle
 *
 * @param xCenter The X-coordinate of the center of triangle
 * @param yCenter The Y-coordinate of the center of triangle
 * @param sideLength The length of the side
 * @param angle The angle in degrees
 */
const calcTrianglePoints = (xCenter: number, yCenter: number, sideLength: number, angle: number = 0): string => {
  const r = (Math.sqrt(3) / 3) * sideLength; // The radius of the circumscribed circle
  const h = (Math.sqrt(3) / 2) * sideLength; // The height of median

  const angleInRadian = (Math.PI * angle) / 180;

  const pointCenter: [number, number] = [xCenter, yCenter];
  const pointCenterNew: [number, number] = rotatePoint(pointCenter, angleInRadian);

  // 1st point
  const point1 = movePointToNewCoordinates(
    rotatePoint([xCenter, yCenter - r], angleInRadian),
    pointCenterNew,
    pointCenter
  );
  const x1 = point1[0];
  const y1 = point1[1];

  // 2nd point
  const point2 = movePointToNewCoordinates(
    rotatePoint([xCenter - sideLength / 2, yCenter + (h - r)], angleInRadian),
    pointCenterNew,
    pointCenter
  );
  const x2 = point2[0];
  const y2 = point2[1];

  // 3rd point
  const point3 = movePointToNewCoordinates(
    rotatePoint([xCenter + sideLength / 2, yCenter + (h - r)], angleInRadian),
    pointCenterNew,
    pointCenter
  );
  const x3 = point3[0];
  const y3 = point3[1];

  return `${x1},${y1},${x2},${y2},${x3},${y3}`;
};

/** *
 * Move point to the new coordinate regarding center
 *
 * @param point The coordinate of point
 * @param center The new center
 * @param centerOld The old center
 */
const movePointToNewCoordinates = (
  point: [number, number],
  center: [number, number],
  centerOld: [number, number]
): [number, number] => {
  const x = point[0];
  const y = point[1];
  const xCenter = center[0];
  const yCenter = center[1];
  const xCenterOld = centerOld[0];
  const yCenterOld = centerOld[1];
  return [x - xCenter + xCenterOld, y - yCenter + yCenterOld];
};

/** *
 * Rotate point
 *
 * @param point The coordinate of point
 * @param center The angle in radians
 */
const rotatePoint = (point: [number, number], angle: number): [number, number] => {
  const x = point[0];
  const y = point[1];

  const xNew = x * Math.cos(angle) - y * Math.sin(angle);
  const yNew = x * Math.sin(angle) + y * Math.cos(angle);

  return [xNew, yNew];
};

如何在rechart中添加倒三角形散点图

how to add Inverted triangle shape scatter in rechart

reactjs

recharts