沿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。如果三角洲足夠小，兩點的斜率就是路徑的斜率。