沿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。如果三角洲足够小，两点的斜率就是路径的斜率。