d3之画地图
程序员文章站
2022-03-14 15:53:20
...
目录
画一个简单的地图,基于GeoJSON数据
var color = d3.scale.category20();
//定义地图的投影
var projection = d3.geo.mercator()
.center([107,31])
.scale(600)
.translate([width/2,height/2]);
//定义地理路径生成器
var path = d3.geo.path()
.projection(projection);
var groups = svg.append("g");
//读取地图数据,并且把它画出来
d3.json("china.geojson",function(error,root){
if(error)
return console.error(error);
groups.selectAll("path")
.data(root.features)
.enter()
.append("path")
.attr("class","province")
.style("fill",function(d,i){
return color(i);
})
.attr("d",path)
.on("mouseover",function(d,i){
d3.select(this)
.style("fill","yellow");
})
.on("mouseout",function(d,i){
d3.select(this)
.style("fill",color(i));
});
})
基于TopoJSON数据,相邻省份的交互
d3.json("data/china.topojson",function(error,toporoot){
if(error)
return console.error(error);
var georoot = topojson.feature(toporoot,toporoot.objects.china);
var neighbors = topojson.neighbors(
toporoot.objects.china.geometries);
var groups = svg.append("g");
var paths = groups.selectAll("path")
.data(georoot.features)
.enter()
.append("path")
.attr("class","province")
.style("fill","#ccc")
.attr("d",path);
paths.each(function(d,i){
d.neighbors = d3.selectAll(
neighbors[i].map(function(j){
return paths[0][j];
})
);
})
.on("mouseover",function(d,i){
d3.select(this).style("fill","red");
d.neighbors.style("fill","steelblue");
})
.on("mouseout",function(d,i){
d3.select(this).style("#ccc");
d.neighbors.style("fill","#ccc");
});
});
推荐阅读
-
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
-
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
-
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
-
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
-
从零学python系列之教你如何根据图片生成字符画
-
Android项目实战之百度地图地点签到功能
-
Python画直方图之seaborn
-
百度地图API之百度地图退拽标记点获取经纬度的实现代码
-
微信小程序之获取当前位置经纬度以及地图显示详解
-
Android百度地图之方向感应和模式更改