CODEWITHSUNDEEP
d3.jssvgopenlayers
Espen
Espen

Reputation: 110

Add triangles along path with D3

I am trying to replicate the image below using OpenLayers and D3.js.

enter image description here

I have tried to add triangles along the path using getPointAtLength() and just adding them as SVG elements, but that does not take care of the orientation of the line. To get this working I would need to find the slope and rotate each triangle.

I have also taken a look at this StackOverflow answer: How to place arrow head triangles on SVG lines?

This looks great but unfortunately it only works for polylines. However, since I am using D3.js together with OpenLayers it seems like I have to use paths and not polylines since I need the d3.geo.path function to transform all features on the map.

As for now it seems like I have the following options:

  1. Add triangles along the path by calculating the slope at every point. Is there an easy way to calculate slope along a path?
  2. Somehow combine D3.js og and OpenLayers and use polylines instead of paths. Is this possible?
  3. Somehow convert my path to a polyline and draw that one instead of the path. Is there a function for doing this?

Are there other options that I can test out?

Upvotes: 1

Views: 369

Answers (1)

Robert Longson
Robert Longson

Reputation: 124179

You could call getPointAtLength at two points separated by a delta. The slope of the two points would be the slope of the path if the delta is small enough.

Upvotes: 1

Related Questions