SVG箭头跟随线条方向

Question

从下面的代码（不是我的代码）中，如何能够使箭头路径对齐以跟随直线的方向？

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"));

链接：https://codesandbox.io/s/x5m74nzro

将数据值更改为以下示例：

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

然后您将看到箭头的外观不佳或未遵循直线的方向。

我想实现以下目标：

Answer 1

Victory是用于React的方便的图形工具，但是很明显VictoryLine和codeandbox中的代码本身并未提供任何相对于箭头的计算。因此，您应该编写一个函数来计算（使用三角函数）所有箭头，并将其传递给VictoryLine。也许某个地方可以通过参数绘制箭头的库，您将很幸运找到它;-)