d3.js--Arrow Drawing

First we need to understand how to draw arrows in SVG:

Write a pair of <defs> first, and then write a pair of <marker> inside, where the attribute of marker is:

ViewBox	The area of the coordinate system
reFX, Refy	The datum point within the ViewBox, which is plotted at the end of the line (note case).
Markerunits	A datum with a size of two values: strokewidth (width of line) and Userspaceonuse (the size of the front of the graph)
Markerwidth, Markerheight	Size of the identity
Orient	Draw direction, can be set to: Auto (auto confirm direction) and angle value
Id	ID number of the identity

Then we use the d3.js to draw the arrows more clearly:

Add Defs label var defs = Svg.append ("defs");//Add marker tag and its properties var arrowmarker = defs.append ("marker")    . attr ("id", " Arrow ").    attr (" Markerunits "," Strokewidth "). attr (" Markerwidth ").    attr (" Markerheight ",.)    attr ("ViewBox", "0 0"). attr ("reFX", 6). attr ("Refy",    6). attr ("Orient",    "Auto")

Draw straight arrow var Arrow_path = "m2,2 l10,6 l2,10 l6,6 l2,2"; Arrowmarker.append ("path")    . attr ("D", Arrow_path)    . attr ( "Fill", "#000")//Draw linear var line = Svg.append ("lines").    attr ("x1").    attr (    "Y1", "attr", x2).    attr ("y2").    attr ("Stroke", "red").    attr ("Stroke-width", 2)    . attr ("Marker-start", "url (#arrow)")    . attr ("Marker-end", "url (#arrow)")

Draw the curve arrow var curve_path = "m20,70 t80,100 t160,80 t200,90"; var curve = svg.append ("path")    . attr ("D", Curve_path) .    attr ("Fill", "white").    attr ("Stroke", "red").    attr ("Stroke-width", 2)    . attr ("Marker-start", URL (#arrow)).    attr ("Marker-mid", "url (#arrow)")    . attr ("Marker-end", "url (#arrow)");

The properties drawn at different locations are as follows:

• Marker-start: At the beginning of the path
• Marker-mid: At the middle end of the path (must be a point in the middle of Path)
• Marker-end: At the end of the path

The drawing results are as follows:

d3.js--Arrow Drawing