赵工的个人空间


网络课堂部分转网页计算部分转编程演练

 JS数据可视化

首页 > 网络课堂 > JS数据可视化 > 使用D3JS加载地图
使用D3JS加载地图

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方法的名称大部分完全不同。

Copyright@dwenzhao.cn All Rights Reserved   备案号:粤ICP备15026949号
联系邮箱:dwenzhao@163.com  QQ:1608288659