"D3.js Advanced Series-7.0" Labeling locations

Sometimes it is necessary to tell the user some of the goals on the map, if the goal is to be represented by just one coordinate, it is called "callout".

1. What is the label?

Labeling refers to an element on a map that requires only one coordinate to represent it. For example, draw a circle at latitude and longitude (116, 39), draw a symbol at (108, 30), which belong to the callout, or you can interpret the callout as a point element.

We know that the latitude and longitude can not be plotted directly on the map, you need to first convert it to pixel coordinates with a projection function. 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 latitude and longitude of Beijing can be found by the query is (116.3, 39.9), this value as a projection function parameters can be obtained pixel coordinates. In fact, the geographical information of the Geojson file is also latitude and longitude, but also after the transformation of the projection function to get pixel coordinates. Therefore, if the same projection function is used, the converted Beijing coordinates can be plotted directly on the map.

2. How to mark on the map of D3

First, define a projection function as follows.

var projection = D3.geo.mercator (). Center ([107, +]). Scale (+)    . Translate ([WIDTH/2, HEIGHT/2]);

Second, use this projection to define the geographic path builder D3.geo.path, which is used to draw the map.

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

Then, with the latitude and longitude of Beijing as the projection parameters, the pixel coordinates of Beijing are obtained.

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

Finally, a circle is drawn with the pixel coordinates obtained above, which is exactly in the position of Beijing.

Svg.append ("Circle"). attr ("Class", "point"). attr ("CX", Propeking[0]). attr ("Cy", Propeking[1]). attr ("R", 8);

3. Mark five locations on the map of China

Here is an example that requires the following:

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

First of all, collect the latitude and longitude of five cities and pictures, can be found on the Internet. Save the picture in the IMG folder in the same directory as the HTML file of the Web page, and then write a JSON file that brings together the latitude and longitude information and the picture path information. The contents of the JSON file are as follows.

{"Name": "Place", "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 "},/***** omit *****/]}

The image data is not in the JSON file, just save the path. After drawing the map, call D3.json to request the Places.json file and add a sufficient number of grouping elements <g> by binding the array location, each of which represents a city. The transform attribute of the grouping element <g> is used to pan the callout point to the specified position, and the translation amount can be computed by the projection function to calculate the latitude and longitude of the city.

Then, add the Circle <circle> and picture <image> to <g> respectively. <image> is a picture element of SVG and requires only five attributes to suffice.

<image xlink:href= "Image.png" x= "$" y= "$" width= "height=" ></image>

which

• xlink:href: Image name or image URL
• x: Picture sit up corner x coordinate
• y: The picture sits on the upper corner y coordinate
• width: Picture width
• Height: Picture height

The code for requesting the file and inserting the callout point is as follows.

D3.json ("Places.json", function (error, places) {        //Insert grouping element var location = Svg.selectall (". Location"). Data ( places.location). Enter (). Append ("G"). attr ("Class", "Location"). attr ("Transform", function (d) {//Calculate the position of the callout point var coor = Projection ([D.log, D.lat]), return "translate (" + coor[0] + "," + coor[1] + ")";}        "; Insert a circle        location.append ("Circle"). attr ("R", 7);//Insert a picture location.append ("image"). attr ("x"). attr ("Y",-40). attr ("width"). attr ("height", "n"). attr ("Xlink:href", function (d) {return d.img;});});

4. Results

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

The full code opens the following link, right-click to view the source code:

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

Topojson file for map of China: China.topojson

South China Sea islands: Southchinasea.svg

JSON file that specifies the path to the picture: Places.json

Thank you for reading.

Document Information

• Copyright Notice: Attribution (by)-Non-commercial (NC)-No deduction (ND)
• Published: June 6, 2015
• 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-7.0" Labeling locations