[D3.js advanced series-4.0] Draw arrows, d3.js4.0

[D3.js advanced series-4.0] Draw arrows, d3.js4.0

Drawing in the SVG drawing area, when drawing a line and curve, you often need to add an arrow somewhere. This article describes how to add arrows to straight lines and curves in D3.

 

So far, we have drawn D3 charts in the SVG drawing area. Although D3 can also be drawn using Canvas or WebGL, SVG is the most commonly used. To draw arrows with D3, you must first understand how to draw arrows in SVG.

1. Define the arrow identifier in SVG

The arrow is defined as follows. First, write a pair of <defs> and then a pair of <marker>. The meaning of the marker attribute is:

ViewBox	Coordinate System Area
RefX, refY	Coordinate origin in viewBox (case sensitive)
MarkerUnits	The baseline of the logo size, which has two values: strokeWidth (line width) and userSpaceOnUse (front-end size of the image)
MarkerWidth, markerHeight	Id size
Orient	Draw direction, which can be set to: auto (automatic direction confirmation) and angle value
Id	ID of the identifier

Then draw the image in the marker. The following code uses the path to draw an arrow.

<defs><marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refX="6" refY="6" orient="auto">        <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill: #000000;" /></marker></defs>

2. Draw arrows in SVG

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

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

You can also use the path to draw the image:

<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 for drawing at different locations are as follows:

• Marker-start: path start point
• Marker-mid: path center endpoint (must be a point in the middle of the path)
• Marker-end: path endpoint

3. Draw arrows with D3

With the above content, how can we draw it in D3?

First, define the arrow ID:

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","12")                        .attr("markerHeight","12")                        .attr("viewBox","0 0 12 12")                         .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 preceding marker is:

// Draw a straight line var line = svg. append ("line "). attr ("x1", 0 ). attr ("y1", 0 ). attr ("x2", 200 ). attr ("y2", 50 ). attr ("stroke", "red "). attr ("stroke-width", 2 ). attr ("marker-end", "url (# arrow)"); // draw the 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 is the image at the beginning of this article. The complete code is:

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

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

Thank you for reading.

Document Information

• Copyright Disclaimer: BY-non-commercial (NC)-deduction prohibited (ND)
• Published on: February 1, December 8, 2014
• More content: OUR D3.JS-data visualization special site and CSDN personal blog
• Note: This article is published in OUR D3.JS. For more information, see the source. Thank you.