d3.js学习9----地图的制作2

d3.json() 不能直接读取本地文件，所以我就用xampp弄了web服务器，然后把代码里的<scriptsrc="http://d3js.org/d3.v3.min.js"> 链接里的d3.v3.min.js文件下载下来，放在本地，然后改成<script src=" d3.v3.min.js"> 然后用xampp的https://local/…………打开，终于显示正确了。

         下面来细化一下那个地图的每一个步骤，自己做一个北京市的地图：

1、首先，我把上次的中国地图的代码直接在

d3.json("beijing.json",function(error, root){…………})把文件名改成了我重新下载的北京地图的数据，也就是beijing.json 上次有链接。

好笑的是显示出来超级小，就跟之前中国地图里面的北京大小一模一样。

原因出在投影方式这里：

         varprojection = d3.geo.mercator()

                                                        .center([107,31])

                                                        .scale(850)

                                                   .translate([width/2,height/2]);

这里决定了地图的位置，大小等等，但是好难调啊，把它调大，偏移所错了，它就不见了。

第一个是说地图中心的精度和纬度的事情center() 设定地图的中心位置，[107,31] 指的是经度和纬度。

         varprojection = d3.geo.mercator()

                                                        .center([120,31])

                                                        .scale(14000)

                                                   .translate([1200,3050]);

最终我改成这样，才让它大概就在左边的位置，并且足够大。

var path = d3.geo.path()

                                               .projection(projection);//然后在path变量里面用这个projection

 

d3.json("beijing.json",function(error, root) { //然后path变量在很多里面就一直用到啦。。