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

<html>
    <head>
        <meta charset="utf-8">
        <title>China Maptitle>
    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>

你可能感兴趣的:(d3 绘制中国地图城市及城市间的连线)