从下面的代码(不是我的代码),我怎样才能对齐箭头路径以跟随线的方向?
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 }]}
然后你会看到箭头不好看或者不跟直线的方向。
我想实现这样的目标:
最佳答案
Victory是 React 的一个方便的图形工具,但很明显 VictoryLine codesandbox 中的代码本身不提供任何与箭头相关的计算。因此,您应该编写一个函数来计算(使用三 Angular 函数)所有箭头点并将它们传递给 VictoryLine。或者也许某个地方有一个可以通过参数绘制箭头的库,你会很幸运地找到它;-)
关于javascript - SVG 箭头跟随线方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53426846/