D3js-值域渐变地图

最新推荐文章于 2022-03-25 20:35:03 发布

六月心悸

最新推荐文章于 2022-03-25 20:35:03 发布

阅读量5.7k

点赞数 3

分类专栏：数据可视化（Echarts&D3js）文章标签： D3js 值域渐变地图

本文链接：https://blog.csdn.net/u013147600/article/details/46738271

版权

根据各个省份的数值从小到大，显示的颜色由浅到深。

效果图：

源代码：

<html>
  <head>
    <title>D3 值域渐变地图</title>
    <style type="text/css">
		  		.tooltip{
		  			font-family:simsun;
		  			font-size:16px;
		  			width:120;
		  			height:auto;
		  			position:absolute; //绝对路径
		  			text-align:center;
		  			border-style:solid;
		  			border-width:1px;
		  			background-color:white;
		  			border-radius:5px;	
		  		}		
	 </style>
  </head>
  
  <body>
  	<!-- D3js系列文件 -->
  	<script type="text/javascript" src="js/d3/d3.js"></script>
	<script type="text/javascript" src="js/d3/d3.min.js"></script>
	<!-- 读取topJson文件 -->
	<script type="text/javascript" src="js/d3/topojson.js"></script>
   <script type="text/javascript">
   		
   		var width =1000;
   		var height =1000;
   		var svg =d3.select("body")
   					.append("svg")
   					.attr("width",width)
   					.attr("height",height);
   		
   		//投影
   		var projection =d3.geo.mercator()
   						.center([107,30]) //中心点
   						.scale(800) //地图大小
   						.translate([width/2,height/2-50]); //地图宽度和高度
   		//投影后获得的路径
   		var path =d3.geo.path()
   					.projection(projection);

最低0.47元/天解锁文章

六月心悸

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
D3js-值域渐变地图

根据各个省份的数值从小到大，显示的颜色由浅到深。效果图：源代码： D3 值域渐变地图 .tooltip{ font-family:simsun; font-size:16px; width:120; height:auto; position:absolut
复制链接

扫一扫