d3 绘制中国地图城市及城市间的连线

来源：互联网发布：mysql pid文件丢失编辑：程序博客网时间：2024/06/05 04:17
<html>    <head>        <meta charset="utf-8">        <title>China Map</title>    </head>    <style>        body{            background: black;        }        #southsea{            stroke:#63B8FF;            stroke-width: 1px;        }        circle{            fill:#00F5FF;            fill-opacity: .5;            stroke:#fff;            stroke-width: .5;        }    </style>    <body>        <script src="../../static/d3.v3.min.js"></script>        <script>            var width = 1500;            var height = 800;            var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);            var projection = d3.geo.mercator().center([105,40]).scale(900).translate([width/2,height/2]);            var path = d3.geo.path().projection(projection);            var zoom = d3.behavior.zoom().scaleExtent([1,10]).on("zoom",zoomed);            function zoomed(){                d3.select(this).attr("transform","translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");            }            china = svg.append('g').call(zoom);            d3.json("../../static/china.geojson",function(error,root){                if(error) return console.error(error);                var province = china                    .selectAll("path")                    .data(root.features)                    .enter()                    .append("path")                    .attr("d",path)                    .attr("stroke","#63B8FF")                    .attr("stroke-width",1)                    .attr("fill","black");            });            d3.xml("../../static/gxd/southchinasea.svg",function(error,xmlDocument){                china.append("g").html(function(d){                   return d3.select(this).html() + xmlDocument.getElementsByTagName("g")[0].outerHTML;                });                var gSouthSea = d3.select("#southsea");                gSouthSea.attr("transform","translate(1100,600) scale(0.5)").attr("class","southsea");            });            d3.json("/transfer/get_citys",function(error,root){                if(error) return console.error(error);                var circle = china                    .append("g")                    .selectAll("circle")                    .data(root)                    .enter()                    .append("circle")                    .attr("r",2)                    .attr("transform",function(d){                        var coor = projection([d[1],d[2]]);                        return "translate("+coor[0]+","+coor[1]+")";                    });            });            //绘制城市之间连线            d3.json("/transfer/get_paths1",function(error,root){                if(error) return console.error(error);                var paths = china                    .append("g")  //新建g组合标签                    .selectAll("line")  //选中所有line标签                    .data(root)    //数据集为root                    .enter()    //进入循环                    .append("line")   //每一个循环新增一个line标签                    .transition()     //延迟绘制                    .duration(3000)   //延迟绘制                    //设置line属性x1，y1，x2，y2                    .attr("x1",function(d){                        var coor1 = projection([d[1],d[2]]);                        return coor1[0];                    })                    .attr("y1",function(d){                        var coor1 = projection([d[1],d[2]]);                        return coor1[1];                    })                    .attr("x2",function(d){                        var coor2 = projection([d[3],d[4]]);                        return coor2[0];                    })                    .attr("y2",function(d){                        var coor2 = projection([d[3],d[4]]);                        return coor2[1];                    })                    .attr("stroke","red")  //绘制线红色                    .attr("stroke-width",2);  //绘制线宽2个像素            });            //END        </script>    </body></html>
阅读全文
0 0