D3.JS训练题笔记1——（绘制地图相关）

1. 使用json文件绘制地图

①设置投影函数

var projection=d3.geoMercator();//墨卡托投影

投影函数是将三维地图转换为二维地图的工具，有多种投影方式。

②定义路径生成器

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

③读取json文件并绘制地图

d3.json(path).then(function(json){
            map.selectAll("path")
                    .data(json.features)
                    .enter()
                    .append("path")
                    .attr("d",path)
                    .attr("fill","xxx");
})

path元素被属性d所定义，d属性包含一系列方法和参数，告诉电脑如何在纸上移动笔。

2. d3.zoom()

var zooming=function(d){
                var offset=[d3.event.transform.x,d3.event.transform.y];//投影中心
                var newScale=d3.event.transform.k*2000;
                //使用d3.zoom() 处理你的图表放大和移动的时候，d3.event会主动添加transform属性
                //这个的值包含的k表示缩放值，是相对于初始的画布
                projection.translate(offset)//设置投影的平移位置
                          .scale(newScale);//设置投影的缩放系数

                svg.selectAll("path")
                   .attr("d",path);
                
                svg.selectAll("circle") 
                   .attr("cx",function(d){
                       if(d.Longitude&&d.Latitude){
                            return projection([d.Longitude,d.Latitude])[0]; 
                            }
					})
					.attr("cy",function(d){
                        if(d.Longitude&&d.Latitude){
                            return projection([d.Longitude,d.Latitude])[1];
                        }
					});
                
            }
    
            var zoom=d3.zoom()
                    .scaleExtent([0.02,2.0])
                    .translateExtent([[-1200,-700],[1200,700]])
                    .on("zoom",zooming);

projection本质上是一个二位比例尺，projection([经度，维度])[0]返回映射到二维平面的x坐标值，[1]则返回y坐标值。

3. Projection的不同投影方式

（1）阿伯斯投影 ：d3.geoAlbersUsa()

阿伯斯投影是被设计用4个阿伯斯投影把美国的阿拉斯加州和夏威夷州显示到本图旁边的复合投影。阿伯斯投影不支持旋转和设定中心。

（2）等面积方位投影：d3.geoAzimuthalEqualArea()
等面积方位投影也适合等值线图，这个投影的极坐标方向被用来作为联合国图标。

（3）等距方位投影：d3.geoAzimuthalEquidistant()
等距方位投影保存着投影中心，从投影上的任何点到投影中心的弧线距离都是成比例的。因此，圆形的投影围绕着投影中心被投影在用圆圈住的一个笛卡尔平面上。

（4）圆锥共形投影：d3.geoConicConformal()
兰伯特的圆锥共形投影将地球投影在一个圆锥上。

（5）球心投影：d3.geoGnomonic()

球心投影是一种方位投影，它连续不断地投影一个巨大的包围圈。

（6）墨卡托投影：d3.geoMercator()

球形的墨卡托投影在映射平铺的数据时是最常用的。在做训练题时，也是使用的这种投影。

（7）极射赤平投影：d3.geoStereographic()

极射赤平投影是另一个角度的方位投影。它的视角相当于站在地球的表面向里面看（跟球心投影相反），它因此被经常用于天体图。

4. svg.append(g)的目的

g是 svg 中的一个属性，是 group 的意思，它表示一组什么东西，如一组 lines ， rects ，circles 其实坐标轴就是由这些东西构成的。
在svg中提供了如g元素这样的将多个元素组织在一起的元素。由g元素编组在一起的可以设置相同的颜色，可以进行坐标变换。