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

Source: Internet
Author: User

[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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.