[D3.js advanced series-7.0] location, d3.js7.0

[D3.js advanced series-7.0] location, d3.js7.0

Sometimes you need to tell the user some goals on the map, if the target can be expressed by only one coordinate, it is called "annotation ".

1. What is Annotation

Annotation is an element that can be expressed by only one coordinate on a map. For example, draw a circle at the longitude and latitude (116, 39) and draw a symbol at (108, 30, the annotation can also be understood as a "point element ".

We know that we only know that the longitude and latitude cannot be directly mapped on the map. We need to use the projection function to convert it into pixel coordinates. For example, if you want to mark the location of "Beijing" on a map of China, but do not know the pixel coordinates of Beijing. The longitude and latitude of Beijing can be found through the query (116.3, 39.9). The pixel coordinates can be obtained by using this value as a parameter of the projection function. In fact, the geographic information of the GeoJSON file is also the latitude and longitude, And the pixel coordinates are obtained after the Projection Function Conversion. Therefore, if the same projection function is used, the converted Beijing coordinates can be drawn directly on the map.

2. How to mark on D3 Map

First, define a projection function as follows.

var projection = d3.geo.mercator().center([107, 31]).scale(600)    .translate([width/2, height/2]);

Second, use this projection to define the geographic path generator d3.geo. path, which is used to draw a map.

var path = d3.geo.path().projection(projection);

Then, the longitude and latitude of Beijing are used as the projection parameters to obtain the pixel coordinates of Beijing.

var peking = [116.3, 39.9];var proPeking = projection(peking);

Finally, draw a circle with the pixel coordinate obtained above, and the circle is located in Beijing.

svg.append("circle").attr("class","point").attr("cx",proPeking[0]).attr("cy",proPeking[1]).attr("r",8);

3. Add five locations on map of China

The following is an example with the following requirements:

The location of the five cities is marked on the map of China, and an image of the city is added to each annotation. The five cities are Beijing, Shanghai, Guilin, Urumqi, and Lhasa.

First, you can find the longitude and latitude of the five cities on the Internet. Save the image in the img folder under the same directory of the HTML file on the webpage, and write a JSON file to collect the latitude and longitude information and image path information. The content of the JSON file is as follows.

{"Name": "location", "location": [{"name": "Beijing", "log": "116.3", "lat": "39.9 ", "img": "img/beijing.png" },{ "name": "Shanghai", "log": "121.4", "lat": "31.2", "img ": "img/shanghai.png"},/***** omitted ******/]}

The image data does not exist in the JSON file. Just save the path. After the map is drawn, call the d3.json request places. json file and bind an array location to add a sufficient number of group elements <g>. Each group represents a city. The transform attribute of the grouping element <g> can be used to translate the annotation point to a specified position. The translation quantity can be obtained by using the projection function to calculate the longitude and latitude of the city.

Then, add <circle> and <image> respectively to <g>. <Image> is an image element of SVG. It only requires five attributes.

<image xlink:href="image.png" x="200" y="200" width="100" height="100"></image>

Where,

• Xlink: href: Image name or URL
• X: The coordinate of the image sitting in the coordinate column x
• Y: Y coordinate of the image
• Width: Image Width
• Height: Image Height

The request file and the Code for inserting annotation points are as follows.

D3.json ("places. json ", function (error, places) {// Insert the grouping element var location = svg. selectAll (". location "). data (places. location ). enter (). append ("g "). attr ("class", "location "). attr ("transform", function (d) {// calculate the location of the annotation point var coor = projection ([d. log, d. lat]); return "translate (" + coor [0] + "," + coor [1] + ")" ;}); // insert a circle location. append ("circle "). attr ("r", 7); // insert an image location. append ("image "). attr ("x", 20 ). attr ("y",-40 ). attr ("width", 90 ). attr ("height", 90 ). attr ("xlink: href", function (d) {return d. img ;});});

4. Results

The result is shown in the image at the beginning of this article.

Open the following link for the complete code and right-click to view the source code:

Http://www.ourd3js.com/demo/G-7.0/mappoint.html

TopoJSON file of map of china: china. topojson

Southchinasea. svg

JSON file of the specified image path: places. json

Thank you for reading.

Document Information

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