[D3.js advanced series-8.0] marking and d3.js series 8.0 Marking

[D3.js advanced series-8.0] marking and d3.js series 8.0 Marking

Sometimes, you need to draw a line on the map, which means "from somewhere to somewhere". In this case, the line drawn on the map is called "".

1. What is the marking line?

A baseline is an element on a map that requires more than two coordinates. For example, connecting Beijing and Shanghai. There are two graphical elements used to draw a baseline: line Element <line> and path element <path>. For a flat map without a curve between two points, <line> is sufficient. For a flat map or a flat map, <path> is required. The marking line sometimes has an arrow to indicate the direction.

2. How to add a baseline with arrows

If you want to indicate the direction of the baseline, you can add an arrow at the end. [Advanced-Chapter 4.0] describes how to add arrows to <line> or <path> by defining tags for SVG. The arrow is marked as follows:

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

Tag is defined in <defs>. <Marker> is the subject of the tag, and <path> in <marker> is the graph of the tag. Here, it is the path of the arrow, and other images can be used, such as circles and rectangles. With reference to this structure, the code for adding an arrow tag with d3 code is as follows.

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");

For a line segment that requires an arrow, set its marker-end attribute to url (# arrow) to add an arrow. arrow is the ID number marked by the arrow.

3. Flat Map

Next, add an arrow to the map of China to show the path "from Guilin to Beijing. For the line between two points on a flat map, use the <line> element.

Calculate the pixel coordinates of the two cities based on their longitude and latitude respectively, and add a <line> to set the value of the marker-end attribute to url (# arrow ).

var peking = projection([116.3, 39.9]);var guilin = projection([110.3, 25.3]);svg.append("line").attr("class","route").attr("x1",guilin[0]).attr("y1",guilin[1]).attr("x2",peking[0]).attr("y2",peking[1]).attr("marker-end","url(#arrow)");

As a result, an arrow is displayed at the end of the marking line, as shown in.

4. Add a circle for the starting point of the marking line

The arrow above is added to the end of a line segment. In addition, you can define a new tag and add it to the starting point of a line segment. For example, the start point shows a circle.

Define a new tag. The Code is as follows.

var startMarker = defs.append("marker").attr("id","startPoint").attr("markerUnits","strokeWidth")    .attr("markerWidth","12")                      .attr("markerHeight","12")                      .attr("viewBox","0 0 12 12")                       .attr("refX","6")                      .attr("refY","6")                      .attr("orient","auto");startMarker.append("circle").attr("cx",6).attr("cy",6).attr("r",2).attr("fill","#000");

The ID of this flag is startPoint, And you can assign a value to the marker-start of the line segment. Modify the code for adding a line segment element:

Svg. append ("line "). attr ("class", "route "). attr ("x1", guilin [0]). attr ("y1", guilin [1]). attr ("x2", peking [0]). attr ("y2", peking [1]). attr ("marker-end", "url (# arrow)") // Add an arrow at the end. attr ("marker-start", "url (# startPoint)"); // Add a circle at the start point

As shown in, there is a circle at the starting point of the marking line and an arrow at the ending point.

5. Results

The results are shown in the image at the beginning of this article.

For the complete code, click the following link and right-click to view the source code.

Http://www.ourd3js.com/demo/G-8.0/arrow.html

In this example, two JSON files are required: china. topojson and southchinasea. svg.

Thank you for reading.

Document Information

• Copyright Disclaimer: BY-non-commercial (NC)-deduction prohibited (ND)
• Published on: February 1, June 13, 2015
• 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.