文章标题

在学一张图的时候要弄清作者的写作思路，哪几个元素是成套出现的，谁在前谁在后，将思路轨迹理清楚，就像这篇文章
1.projection—>path(projection)—->svg添加path并绑定数据，生成地图
2.marker中添加arrow的path，生成箭头—–》marker中添加circle，定义起点—->svg中添加line标签，并绑定circle与arrow
marker的数据形式，帮助我们理解为什么要这样做

var width=500,height=500;/*生成svg画布*/    var svg=d3.select("body")               .append("svg")               .attr("width",width)               .attr("height",height)    /*给地理路径生成器定义投影方式*/    var projection=d3.geo.mercator()                         .center([107,31])                         .scale(600)                         .translate([width/2,height/2]);    var path=d3.geo.path().projection(projection);

下边是定义marker，marker标签包裹path或者circle

var defs=svg.append("defs");    /*定义arrowmarker*/    var arrowMarker=defs.append("marker")                        .attr("id","arrow")                        .attr("markerUnits","strokeWidth")                        .attr("markerWidth","10")                        .attr("markerHeight","10")                        .attr("viewBox","0 0 12 12")                         .attr("refX","6")                        .attr("refY","6")                        .attr("orient","auto");    var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";    arrowMarker.append("path")                .attr("d",arrow_path)                .attr("fill","red");    var startMarker=defs.append("marker")                        .attr("id","startPoint")                        .attr("markerUnits","strokeWidth")                        .attr("markerWidth","12")                        .attr("markerHeight","12")                        .attr("viewBox","0 0 12 12")                         .attr("refX","6")                        .attr("refY","6")                        .attr("orient","auto");    startMarker.append("circle")               .attr("cx",6)               .attr("cy",6)               .attr("r",2)               .style("fill","red");

最后加载数据

    d3.json("china.topojson",function(error,toporoot){        /*topojson转换为geojson*/        if(error){            window.alert("loading data error");        }    var georoot=topojson.feature(toporoot,toporoot.objects.china);    console.log(georoot)    var province=svg.append("g")    province.selectAll("path")            .data(georoot.features)            .enter()            .append("path")            .attr("class","province")            .style("fill","steelblue")            .attr("d",path)    var beijing = projection([116.3, 39.9]);    var guilin = projection([110.3, 25.3]);    svg.append("line")       .attr("class","line_to")       .attr("x1",guilin[0])       .attr("y1",guilin[1])       .attr("x2",beijing[0])       .attr("y2",beijing[1])       .attr("marker-start","url(#startPoint)")       .attr("marker-end","url(#arrow)");    })