Answer by i alarmed alien for Creating bidirectional graphs in D3.js

You can display a bidirectional arrow using the marker-start and marker-end path attributes. Define one or more marker elements in the defs of your SVG containing the arrow head shape you want to use, give each an ID, and then apply them to your paths using either css or directly using a style attribute. e.g.

<svg width="200" height="200"><defs><marker id="start-arrow" viewBox="0 -5 10 10" refX="4" markerWidth="5" markerHeight="5" orient="auto"><path d="M10,-5L0,0L10,5" fill="#000"></path></marker><marker id="end-arrow" viewBox="0 -5 10 10" refX="6" markerWidth="5" markerHeight="5" orient="auto"><path d="M0,-5L10,0L0,5" fill="#000"></path> </marker></defs>

To use them:

 // apply directly using the style attribute<path style="marker-start: url('#start-arrow'); marker-end: url('#end-arrow');" d="M0,0L100,100" />

or

// in your css.arrowed {  marker-start: url(#arrow-start);  marker-end: url(#arrow-end);}// in your SVG<path class="arrowed" d="M0,0L100,100" />

There is also a marker-mid to apply shapes to the middle of paths.

Working demo:

.link {  stroke: black;  stroke-width: 3px;  fill: none;}.arrowed {  marker-start: url(#start-arrow);  marker-end: url(#end-arrow);}

<svg width="200" height="200"><defs><marker id="big-arrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto"><path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" /></marker><marker id="start-arrow" viewBox="0 -5 10 10" refX="4" markerWidth="5" markerHeight="5" orient="auto"><path d="M10,-5L0,0L10,5" fill="#000"></path></marker><marker id="end-arrow" viewBox="0 -5 10 10" refX="6" markerWidth="5" markerHeight="5" orient="auto"><path d="M0,-5L10,0L0,5" fill="#000"></path> </marker><marker id="blob" markerWidth="8" markerHeight="8" refX="5" refY="5"><circle cx="5" cy="5" r="3" style="stroke: none; fill: #000;" /></marker></defs><g><path class="link" style="marker-start: url('#blob'); marker-end: url('#big-arrow');" d="M150,50L50,150" markerUnits="strokeWidth"></path><path class="link arrowed" d="M150,150L50,50"></path></g></svg>

As for Q2, d3 allows you to bind data to DOM elements or calculate layouts using established algorithms, but it doesn't really handle much beyond simple graph traversal and it doesn't hold internal representations of networks that can be reasoned over or used for computations. It can't be used for the same kinds of analyses as the likes of networkx. I know of at least one JS library, KeyLines, that can do network analysis, but it is proprietary software; I am sure there are others out there.