0

I am using d3.svg.symbol().type("triangle-up") as a way to show the intended direction of a path. See image for what I mean

I need the direction of the triangle to be facing words the end point of a path.

I can position the triangle in the middle point of a path and manually rotate it, however, I do not what direction the arrow will need to be facing as the paths are not always the same.

Here is an image of what I currently have:

enter image description here

And here is an image of what I am trying to achieve:

enter image description here

And here is the code i am using up to now:

PLEASE NOT THAT THE VALUES IN THE TRANSLATE PART OF THE CODE ARE THE MIDDLE POINTS OF THE CURVED LINE:

radiusSensorsG.append("path")
    .attr("class", "curved-triangles")
    .attr("d", d3.svg.symbol().type("triangle-up").size(10)))
    .attr("transform", function () {
        if(index % 2 == 0) {
            return "translate(" +
                map.latLngToLayerPoint(curvedCoords[index][1].curveLatLng).x + "," +
                map.latLngToLayerPoint(curvedCoords[index][1].curveLatLng).y + ")";
        } 
        else {
            return "translate(" +
                map.latLngToLayerPoint(curvedCoords[index][1].curveLatLng).x + "," +
                map.latLngToLayerPoint(curvedCoords[index][1].curveLatLng).y + ")";

        }
    })

If it helps the answer in any way, I have the lat/lng positions of the pink markers. These pink markers are what I need my green arrow facing toward and the pink arrow facing back into the large green circle.

If there is any information that I have not provided, please let me know.

Thanks

Alan
  • 362
  • 3
  • 9
  • 18
  • 1
    You probably want [a marker](http://logogin.blogspot.ca/2013/02/d3js-arrowhead-markers.html) instead. This can also be positioned at the center of the path. – Lars Kotthoff Jul 20 '15 at 16:25
  • Thanks @LarsKotthoff I will look into markers now. Any idea on the positioning them so they are facing the pink circles? I know it is like a separate question, so please forgive me if I am breaking SO protocol – Alan Jul 20 '15 at 16:31
  • You should get that automatically from using markers and drawing the lines the right way. – Lars Kotthoff Jul 20 '15 at 16:31
  • Thanks @LarsKotthoff. I will have a play around with markers now and get back to you if there are any issues I have, if that's ok of corse? – Alan Jul 20 '15 at 16:34
  • Well that may be a separate question, but yes. – Lars Kotthoff Jul 20 '15 at 16:35
  • Thanks @LarsKotthoff, if it is too long for a comment styles question I will post a fresh one and let you know about it here. – Alan Jul 20 '15 at 16:36
  • @LarsKotthoff Are markers not covered in the d3 docs? – Alan Jul 20 '15 at 16:39
  • D3 doesn't have an API for markers. – Lars Kotthoff Jul 20 '15 at 16:55
  • @LarsKotthoff Should I be able to get a marker placed just in the middle using `.attr("marker-mid", "url(#arrowhead)")`? I seem to be getting the at the start and end too? – Alan Jul 21 '15 at 21:30
  • Hmm, I was wrong about the markers -- turns out you can't actually place a single marker in the middle of a path. `marker-mid` places markers at all points except the first and last. [This question](https://stackoverflow.com/questions/15729856/display-an-arrow-head-in-the-middle-of-d3-force-layout-link) should help though. – Lars Kotthoff Jul 21 '15 at 21:53
  • @LarsKotthoff Wjhen using `marker-mid` I am not getting markers at all points except the first and the last. I am getting them at first, mid and last points? – Alan Jul 22 '15 at 09:11
  • @LarsKotthoff Are the markers definetly the best option for my original question? – Alan Jul 22 '15 at 09:12
  • No, it sounds like you want to place the symbol as you started doing it. `marker-mid` shouldn't place symbols at the first and last point though. – Lars Kotthoff Jul 22 '15 at 16:41
  • @LarsKotthoff So if my inital method was the correct one, would you have any suggestions on how to answer the original question? – Alan Jul 23 '15 at 09:10
  • The question I've linked to does exactly that. – Lars Kotthoff Jul 23 '15 at 16:18
  • @LarsKotthoff I ended u sorting it by simply changing `.interpolate("basis")` to `.interpolate("cardinal")` – Alan Jul 23 '15 at 16:20
  • @LarsKotthoff a marker doesn't really seem to be the best choice for my case as I need to change the colour + size of the on mouseoer + click etc, which is a litty tricly with markers – Alan Jul 23 '15 at 16:25

0 Answers0