d3全国省份地图实例

 时间:2026-02-18 17:20:45

1、新建5全国省份地图实例.html

2、获取地图所需要的getjson数据//1、获取地图所需要的geojson数据 d3.json("china.json",function(error,data){ });

d3全国省份地图实例

3、定义地图需要的投影

//2、定义地图需要的投影 var _projection = d3.geoMercator()       .center([107,31])

4、定义地图路径生成器//3.定义地图路径生成器 var _geopath = d3.geoPath()       .projection(_projection)

5、开始可视化,先定义SVG,及大小

d3全国省份地图实例

6、生成PATH

_svg.selectAll("path")             .data(data.features)             .enter()             .append("path") //          .attr("d",function(d){ //             return _geopath(d); //          })             //_geopath相当于_geopath(d)             .attr("d",_geopath)             .style("fill","green");                   });

7、此时预览会出现一个很小的图:且在SVG是中偏的

d3全国省份地图实例

8、现在看是偏移了,因为默认为480,250为中心,默认画布区域为960*500

d3全国省份地图实例

9、我们想把地图移到中心:

d3全国省份地图实例

10、此时查看如图:

d3全国省份地图实例

11、但现在上图还是很小,所以在指定scale

d3全国省份地图实例

12、此时结果如图

d3全国省份地图实例

13、但以上方法似乎还不完美,因为我们不知道画布多少的情况下,就不知道放大比例都要靠试,想要自适应,应如下:

d3全国省份地图实例

14、最后如图:

d3全国省份地图实例

  • 小米手机怎么抢劳动节51元过节红包
  • 哪些方法可以保住胃气
  • 土暖气怎么安装最合理
  • 怎样做绩效管理?
  • 明洪武瓷器鉴定方法
  • 热门搜索
    端午手抄报图片 重阳节手抄报简单字少 九九重阳节手抄报大全 学生手抄报设计指南 红心向党手抄报 雾霾手抄报 关于艾滋病的手抄报 感恩母亲手抄报内容 核心价值观手抄报内容 红领巾中国梦手抄报