Javascript SVG箭头要跟随行方向

从下面的代码（不是我的代码）中，我如何能够将箭头路径与直线的方向对齐

import React from "react";
import { render } from "react-dom";
import { VictoryChart, VictoryLine, Curve, Point } from "victory";

class Arrow extends React.Component {
  render() {
    const { data, scale } = this.props;
    const last = data[data.length - 1];
    const x = scale.x(last.x);
    const y = scale.y(last.y);
    const path = `M${x} ${y} 
      l 0 10 
      l 5 -10
      l -10 -5
      z`;
    return (
      <g>
        <Curve {...this.props} />
        <path d={path} stroke="black" />
      </g>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <VictoryLine
        domainPadding={{ x: 10, y: 10 }}
        style={{
          data: { stroke: "#c43a31" }
        }}
        data={[{ x: 2, y: 1 }, { x: 3, y: 3 }]}
        dataComponent={<Arrow />}
      />
    );
  }
}

render(<App />, document.getElementById("root"));

然后您将看到箭头看起来不好，或者没有沿着直线的方向

我想实现以下目标：

---

是一个方便的React图形工具，但很明显，codesandbox中的和代码本身并没有提供任何箭头相关的计算。因此，您应该编写一个函数来计算（使用三角学）所有箭头点，并将它们传递给VictoryLine。或者某个地方有一个库，可以通过参数绘制箭头，您将幸运地找到它；-）

谢谢你的评论。实际上，我正在使用VictoryLine创建自定义

dataComponent

，以实现带有箭头的这一行。我能够将上面的代码转换为react native。但是我需要帮助如何使箭头沿着代码沙盒中的正确方向移动，并将其转换为RN。对不起，我第一次没有得到这个，我以为你需要一个通用工具。好的，这是我的杰作：constpath=

M${x+10}${y+-6}l-113l35.5z

；-）感谢分享您的自定义路径。然而，正如在原始帖子和我的评论中所说的，主要目标是让箭头沿着直线方向。如果这条线现在指向相反的方向呢？请看上面的图片。在codesandbox中，我尝试使用

data={[{x:5，y:1}，{x:3，y:3}]}

，您的路径似乎不在正确的方向。所以，最后，您想要一个通用工具来绘制不同方向的箭头吗？我告诉过你-输入几个数字是没有办法的。每次更改直线的方向或角度（相对于X轴）时，都必须重新计算三角形顶点坐标。小贴士：1）在直线末端将箭头三角形与X轴对齐2）计算直线与X轴之间的角度3）将箭头三角形旋转到第2步中得到的角度。谢谢@Max Kurtz，但我还不确定如何实现这一点。我希望上面的代码作为一个例子，可以被一些人修改，帮助我实现这个目标。我在RN工作还是新手，所以还需要学习很多东西。

data={[{ x: 5, y: 1 }, { x: 3, y: 3 }]}