Any idea to implement Arrow on Links.

[Naveenraj006]

I want to implement an Arrow at the edge of links. Can you give me an idea or hack to implement this?

[ColemanCollins]

You can make a custom Link component that uses an SVG <marker> to drop an arrowhead on the end of a link. The challenge with this is that the way the current link path drawing/curve generation works, it actually flips the start/end points depending on the spatial relationship of the nodes rather than their directed graph relationship. Which means you'll also have to modify the generateCurvePath utility to not do that, because it makes the arrowheads pretty useless.

Here's a gist where I've been playing with this; it's okay for a fairly strict left-to-right and top-to-bottom graph (which is my use case) but you'll need to figure out curve paths that work for your node/link relationships. Hopefully this is enough to get you moving on your own solution: https://gist.github.com/ColemanCollins/541b5987c312e02beb1c10b323db4933

[Naveenraj006]

Yes, the curve path differs from the actual start and stop node. So, I wrote a hack with SVG text to display an arrow at the center of the line.

[Naveenraj006]

You can make a custom Link component that uses an SVG <marker> to drop an arrowhead on the end of a link. The challenge with this is that the way the current link path drawing/curve generation works, it actually flips the start/end points depending on the spatial relationship of the nodes rather than their directed graph relationship. Which means you'll also have to modify the generateCurvePath utility to not do that, because it makes the arrowheads pretty useless.

Here's a gist where I've been playing with this; it's okay for a fairly strict left-to-right and top-to-bottom graph (which is my use case) but you'll need to figure out curve paths that work for your node/link relationships. Hopefully this is enough to get you moving on your own solution: https://gist.github.com/ColemanCollins/541b5987c312e02beb1c10b323db4933

Thank you coleman.