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

Question

我使用的是重新绘制的散点图，我使用的散点形状为"；三角形"；，我的要求是倒三角。我试过使用角度，但不起作用。有人能帮我吗？如何画倒置的三角形。也许我们可以使用rect或path编写自定义形状，但我是新手，请有人帮助我。

代码：

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];
};