D3.js中加载地图GeoJson

D3.js函数库可用来实现数据的图形化显示，功能强大，特别是配合GeoJSON地图，只需要几条指令就可以加载并显示地图，实现数据的地图显示。加载GeoJSON地图的方法为：

var width = 900,height = 600;
var svg = d3.select("#chart").append("svg").attr("width", width).attr("height", height);
var projection = d3.geo.mercator()//设定投影函数 
  .center([108.0, 37.5])// 函数是用于设定地图的中心位置，[107,31] 指的是经度和纬度。
  .scale(700)//函数用于设定放大的比例。
  .translate([width/2, height/2]);//函数用于设定平移。
var path = d3.geo.path().projection(projection);
var color = d3.scale.category20();
d3.json("china.json", function(error, json) {
  if (error)
    return console.error(error);
  console.log(json.features);
  var china= svg.selectAll("path")
    .data( json.features )
    .enter()
    .append("path")
    .attr("stroke","#000")//线的颜色
    .attr("stroke-width",1)
    .attr("fill", function(d,i){
      return color(i);
    })
    .attr("d", path )
    .attr("fill",color(i));
  })
  .append("text").attr("transform",function(d,a){
    return d.name;
  });

其中china.json是中国的GeoJSON格式地图，可以在网上下载到。注意，上述方法是使用d3.v3版本，v4版本有了比较大的变化，与v3方法的名称大部分完全不同。