D3实现的ChinaMap
2015-12-26 23:07
513 查看
<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>
相关文章推荐
- javascript之判断专题
- python之路之猜数游戏
- generator自动生成mybatis配置和类信息
- R的一些统计分析包工具
- codeforces 603 C. Load Balancing 贪心
- Sql使用日常总结
- iOS OC(四) 字符串NSString 可变数组NSMutableArray 不可变数组NSArray 数值对象类NSNumber NSValue 数值对象类NSNumber
- 进军服务器了,转点mysql操作命令
- 401.2 登录方法 尚未确定
- Java中的引用传递
- MariaDB Galera Cluster 部署(如何快速部署 MariaDB 集群)
- Source Insight
- CSS实现鼠标聚焦时边框不变,框内图片放大
- fedora 远程windows桌面
- deb,rpm格式
- java环境变量的配置
- django 快速搭建blog
- 使用web ssh 登陆设备---gateone开发之旅
- 基于rails的schedule网站开发(17):动态流
- 【杭电】[0000]整除235