D3实现的ChinaMap

来源：互联网发布：网络用语der什么意思编辑：程序博客网时间：2024/05/20 04:49

<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>

1 0