D3实现的ChinaMap

LuckyJiang.2021

于 2015-12-26 23:07:46 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web前端-CSS Web前端-JavaScript Web前端-数据可视化 Web前端-HTML 文章标签： D3

本文链接：https://blog.csdn.net/gingerredjade/article/details/50410688

Web前端-JavaScript 同时被 3 个专栏收录

12 篇文章

订阅专栏

Web前端-数据可视化

6 篇文章

订阅专栏

Web前端-CSS

5 篇文章

订阅专栏

本文介绍了一种使用D3.js库绘制中国地图的方法。通过加载GeoJSON格式的地图数据，并应用Mercator投影，实现了一个交互式的地图展示。地图上的每个省份都有独特的颜色填充，并且支持鼠标悬停高亮显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>  
  <head>  
        <meta charset="utf-8">  
        <title>中国地图</title>  
  </head> 
<style>

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
	var width  = 1000;
	var height = 1000;
	
	var svg = d3.select("body").append("svg")
	    .attr("width", width)
	    .attr("height", height)
	    .append("g")
	    .attr("transform", "translate(0,0)");
	
	var projection = d3.geo.mercator()
						.center([107, 31])
						.scale(850)
    					.translate([width/2, height/2]);
	
	var path = d3.geo.path()
					.projection(projection);
	
	
	var color = d3.scale.category20();
	
	
	d3.json("china.geojson", function(error, root) {
		
		if (error) 
			return console.error(error);
		console.log(root.features);
		
		svg.selectAll("path")
			.data( root.features )
			.enter()
			.append("path")
			.attr("stroke","#000")
			.attr("stroke-width",1)
			.attr("fill", function(d,i){
				return color(i);
			})
			.attr("d", path )
			.on("mouseover",function(d,i){
                d3.select(this)
                    .attr("fill","yellow");
            })
            .on("mouseout",function(d,i){
                d3.select(this)
                    .attr("fill",color(i));
            });
		
	});

</script>
	
</body>  
</html>