Edges Example 2 for How to Create Effective Network Data Visualization
Here’s the typical way of showing directionality in networks: arrowheads. Unless you’re highly invested in writing custom draw code for an SVG path, you’ll use markers for arrowheads, as shown here.
There are two things you need to account for with markers: The line length of an edge needs to reach to the edge of the node rather than its center (or your arrowheads get obscured) and markers do not inherit the color or other style settings (like opacity) of their parents, so if you want multi-colored arrowheads you’ll need to create each colored arrowhead definition dynamically and if you want to use semi-transparent edges with arrowheads, then you have to take into account the size of the arrowhead and make sure the base of the path is placed at the tip of the line.