"D3.js Advanced Series-4.0" drawing arrows

When plotting lines and curves in the SVG drawing area, it is often necessary to add arrows somewhere. This article describes how to add arrows to lines and curves in D3.

So far, the chart we have drawn D3 is in the SVG plot area, although D3 can also be plotted with Canvas or WebGL, but SVG is the most common. So, using D3 to draw arrows, first understand how to draw in SVG.

1. Defining an arrow's identity in SVG

Define the arrow's identity as follows, first write a pair of <defs>, and then write a pair of <marker>, where the meaning of the marker attribute is:

ViewBox	The area of the coordinate system
reFX, Refy	The origin of the coordinates within the ViewBox (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 draw the graph in the marker, and the following code draws an arrow graph with path.

<defs><marker id= "Arrow" markerunits= "Strokewidth" markerwidth= "markerheight=" 0 0 "viewbox=" RefX = "6" refy= "6" orient= "Auto" >        <path d= "m2,2 l10,6 l2,10 l6,6 l2,2" style= "fill: #000000;"/></marker>& Lt;/defs>

2. Draw arrows in SVG

With the logo above, you can draw an arrow. Draw a segment below and add an arrow at the end of the segment:

<line x1= "0" y1= "0" x2= "$" y2= ""  stroke= "Red" stroke-width= "2" marker-end= "url (#arrow)"/>

You can also use path to draw:

<path d= "m20,70 t80,100 t160,80 t200,90" fill= "white" stroke= "Red" stroke-width= "2" marker-start= "url (#arrow)" Marker-mid= "url (#arrow)" 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

3. Draw arrows with D3

With the above content, how to draw in the D3?

Define the arrow's identity first:

var svg = d3.select ("Body"). Append ("SVG").    attr ("width", width)    . attr ("height", height), var defs = Svg.append ( "Defs"); var arrowmarker = defs.append ("marker"). attr ("id", "arrow"). attr ("Markerunits", "Strokewidth"). attr ("    Markerwidth "," (")").                        attr ("Markerheight", "a").                        attr ("ViewBox", "0 0")                         . attr ("reFX", "6"                        ). attr ("Refy", "6")                        . attr ("Orient", "Auto"), var arrow_path = "m2,2 l10,6 l2,10 l6,6 l2,2"; Arrowmarker.append ("path"). attr ("D", Arrow_path). attr ("Fill", "#000");

The code for drawing arrows using the above marker is:

Draw linear var line = Svg.append ("lines"). attr ("x1", 0). attr ("Y1", 0). attr ("X2", "$"). attr ("y2", "Red"). attr ("Stroke-width", 2). attr ("Marker-end", "url (#arrow)");//Draw curve 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 result graph is the picture at the beginning of this article, with the complete code:

SVG version: Http://www.ourd3js.com/demo/J-4.0/arrow.svg

Version D3: http://www.ourd3js.com/demo/J-4.0/arrow.html

Thank you for reading.

Document Information

• Copyright Notice: Attribution (by)-Non-commercial (NC)-No deduction (ND)
• Published: December 8, 2014
• More content: our D3. JS-Data Visualization special station and CSDN personal blog
• Remark: This article is published in our D3. JS, reproduced please indicate the source, thank you

D3.js Advanced Series-4.0 draw arrows