使用 D3 沿路径添加三角形

Question

我正在尝试使用 OpenLayers 和 D3.js 复制下面的图像。

我尝试使用 getPointAtLength() 沿路径添加三角形并将它们添加为 SVG 元素，但这并没有考虑线的方向。为了让这个工作，我需要找到斜率并旋转每个三角形。

我还查看了这个 StackOverflow 答案： How to place arrow head triangles on SVG lines?

这看起来不错，但不幸的是它只适用于折线。但是，由于我将 D3.js 与 OpenLayers 一起使用，因此我似乎必须使用路径而不是折线，因为我需要 d3.geo.path 函数来转换地图上的所有要素。

就目前而言，我似乎有以下选择：

1. 通过计算每个点的坡度沿路径添加三角形。有没有一种简单的方法可以计算沿路径的坡度？
2. 以某种方式将 D3.js og 和 OpenLayers 结合起来，并使用折线而不是路径。这可能吗？
3. 不知何故将我的路径转换为折线并绘制该折线而不是路径。有这样做的功能吗？

我可以测试其他选项吗？

Answer 1

您可以在由增量分隔的两个点调用getPointAtLength。如果 delta 足够小，这两个点的斜率就是路径的斜率。