Drawing of the "D3.js Primer series---10" map

My personal blog is: www.ourd3js.com

CSDN Blog for: blog.csdn.net/lzhlzz

Reprint please indicate the source, thank you.

The production of maps is the most important part of the D3. Because in the data visualization, many things will be associated with the map, such as the population of China's provinces, the amount of GDP, etc., can be linked with the map.

Ask the JSON file for the file you need to make the map in D3. JSON (JavaScript Object Notation) is a lightweight data interchange format. The syntax format for JSON can be in:

http://www.w3school.com.cn/json/

Learn. The JSON format is applied to the geographic file, called the GeoJSON file. This section is used to draw the map with this file.

So how to get the map of China GeoJSON file, which is actually a little trouble, you can refer to: Https://github.com/clemsos/d3-china-map to make, which not only need to install some things, but also to study the production method, The friend who wants to download the GeoJSON file of China map directly may feel very uncomfortable, hehe, actually I am also like this.

Well, I'll work hard, and I'll put a good map of China on it and share it with you.

GeoJSON file for map of China: China.json

This file is used Natural Earth data, after extraction made, I also removed a lot of useless information, only the Chinese provinces of the name and ID number, here first thanks to the data provided by Natural Earth. Next I will extract data from other countries and put it on a personal blog for everyone to share, hoping to save everyone's time because this part is really troublesome. For a friend who only wants to visualize, it is not expected to do this job. Subsequent production of a variety of GeoJSON files, will be put to our D3. JS Station, please pay attention.

All right, no more nonsense. Start using D3 to draw a map. The drawing is divided into three steps:

1. Set the projection function

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

Because the map data in the GeoJSON file is both longitude and latitude information, they are all three-dimensional. To display two-dimensional on a Web page, set a projection function to convert the latitude and longitude. As shown above, we use the D3.geo.mercator () projection method. For the functions of various projection modes, refer to: https://github.com/mbostock/d3/wiki/Geo-Projections

The center () function is used to set the central location of the map, [107,31] refers to longitude and latitude.

The scale () function is used to set the magnification.

The translate () function is used to set panning.

2. Set the path function

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

Put the above projection function, as an argument, into the path. This path function is used to convert longitude latitude to planar information, which is used to draw.

3. Read the file and draw

D3.json ("China.json", function (error, root) {if (error) return Console.error (Error); Console.log (root.features); Svg.selectall ("path"). Data (Root.features). Enter (). Append ("path"). attr ("Stroke", "#000"). attr ("Stroke-width", 1). attr ("Fill", function (d,i) {return color (i);}). attr ("D", Path). On ("MouseOver", function (d,i) {                d3.select (this)                    . attr ("Fill", "yellow");            })            . On ("Mouseout", function (d,i) {                d3.select (this)                    . attr ("Fill", Color (i));            });

As in the previous sections, read the file with D3.json.notice, again, that the call to this function requires you to build a server。 The next step is to add path to SVG. Note that attr ("D", Path) is a line of code, as mentioned earlier, which is actually equivalent to:

. attr ("D", funtion (d) {return path (d);})

Be sure to pay attention to this ellipsis usage. This is a bit difficult to understand.

All right, look at the results.

Our country was drawn up. To see the full code and try to interoperate with friends, please click on the link below to see, put the mouse on it will have discoloration effect:

Http://www.ourd3js.com/demo/chinamap.html