【d3.js教程14】可拖动的地图详解

来源：互联网发布：淘宝店铺招牌是哪个编辑：程序博客网时间：2024/06/05 23:01
<html>    <head>          <meta charset="utf-8">          <title>中国地图</title>    </head> <style type="text/css">*{margin: 0;padding: 0;}.link {                   stroke: #ccc;stroke-width: 0.5;}</style><body><script src="js/d3.min.js" type="text/javascript" charset="utf-8"></script><script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">  var width  = 2000;var height = 1000;var svg = d3.select("body").append("svg")    .attr("width", width)    .attr("height", height)    .append("g")    .attr("transform", "translate(0,0)");/*定义投影*/var projection1 = d3.geo.mercator()                            //麦克托投影法.center([107, 31])                                   //地图的经纬度（将制定的经纬度设定为地图的中心）.scale(850)                                          //地图放大比例    .translate([width/2, height/2]);                     //位移/*传入投影，并计算路径*/var path = d3.geo.path().projection(projection1);                              //将三维地图投影到二维坐标上。为了避免混淆，特意将projection改成projection1var force = d3.layout.force().size([900, 900]);                //size设定容器的中心var color = d3.scale.category20();d3.json("json/chinamap.json", function(error, root) {if (error) return console.error(error);/*定义两个数组存储节点和边*/var nodes = [];var links = [];root.features.forEach(function(d, i) {var centroid = path.centroid(d);              //计算出数据的中点centroid.x = centroid[0];                     //数组0元素中存着中点的横坐标centroid.y = centroid[1];                     //数组1元素中存着中点的纵坐标centroid.feature = d;                         //把数据存到feature中nodes.push(centroid);                         //将节点推进组数});var triangles = d3.geom.voronoi().triangles(nodes);     //将节点进行三角剖分，将结果保存在triangles中triangles.forEach(function(d,i){                        //用循环，将每个三角的三个点两两相连，推进边数组中links.push( edge( d[0] , d[1] ) );                    //edge函数在后面links.push( edge( d[1] , d[2] ) );links.push( edge( d[2] , d[0] ) );});force.gravity(0)                                       //从中心产生的重力.charge(0)                                             //吸引力和排斥力.nodes(nodes)                                          //绑定节点.links(links)                                          //绑定连线.linkDistance(function(d){ return d.distance; })       //设置连线的距离.start();                                              //产生作用var node = svg.selectAll("g").data(nodes).enter().append("g").attr("transform", function(d) { return "translate(" + -d.x + "," + -d.y + ")"; })      .call(force.drag)                           //不写这句不能拖动    .append("path")        .attr("stroke","#000")        .attr("stroke-width",1)        .attr("fill", function(d,i){                 //为地图填充颜色            return color(i);        })        .attr("d", function(d){                              return path(d.feature);        } );var link = svg.selectAll("line")                                  //添加连线.data(links).enter().append("line").attr("class","link").attr("x1",function(d) { return d.source.x; } ).attr("y1",function(d) { return d.source.y; } ).attr("x2",function(d) { return d.target.x; } ).attr("y2",function(d) { return d.target.y; } ); force.on("tick", function() {                                      //及时设定force的源头和末尾    link.attr("x1", function(d) { return d.source.x; })        .attr("y1", function(d) { return d.source.y; })        .attr("x2", function(d) { return d.target.x; })        .attr("y2", function(d) { return d.target.y; });   node.attr("transform", function(d) {                           //也就是nodes的数据一直在变，及时将位移改变      return "translate(" + d.x + "," + d.y + ")";   });});});/*edge函数，返回源头和目标以及距离*/function edge(a, b) {                               var dx = a[0] - b[0], dy = a[1] - b[1];return {source: a,target: b,distance: Math.sqrt(dx * dx + dy * dy)};}</script></body>  </html>
0 0