僅作閱讀理解API文檔時(shí)的參考易茬，如有錯(cuò)誤麻煩指正扭勉，多謝~
Map projections are sometimes implemented as point transformations.
地圖投影有時(shí)會(huì)由點(diǎn)轉(zhuǎn)換實(shí)現(xiàn)剪菱。
This is a reasonable mathematical approach if your geometry consists of continuous, infinite point sets. Yet computers do not have infinite memory, so we must instead work with discrete geometry such as polygons and polylines!
如果你的球面幾何由連續(xù)的無(wú)限點(diǎn)集合組成，這是一個(gè)合理的數(shù)學(xué)方法丧枪。 由于計(jì)算機(jī)沒(méi)有無(wú)限的內(nèi)存潘悼，因此我們必須使用離散的幾何圖形，如多邊形和折線嗤栓！
Discrete geometry makes the challenge of projecting from the sphere to the plane much harder. The edges of a spherical polygon are geodesics (segments of great circles), not straight lines. Projected to the plane, geodesics are curves in all map projections except gnomonic, and thus accurate projection requires interpolation along each arc. D3 uses adaptive sampling inspired by a popular line simplification method to balance accuracy and performance.
使用離散的幾何圖形進(jìn)行球面投影到平面是非常困難的冻河。球形的多邊形的邊緣是測(cè)地線，而不是直線茉帅。投影到平面叨叙，測(cè)地線是所有地圖投影（除了點(diǎn)切投影）的曲線，因此準(zhǔn)確的投影需要沿著每個(gè)弧線進(jìn)行插值堪澎。D3使用自適應(yīng)采樣（受一種流行的線簡(jiǎn)化方法而啟發(fā)得到的）方法來(lái)平衡精準(zhǔn)度和性能擂错。
The projection of polygons and polylines must also deal with the topological differences between the sphere and the plane. Some projections require cutting geometry that crosses the antimeridian, while others require clipping geometry to a great circle. Furthermore, spherical polygons require a winding order convention to determine which side of the polygon is the inside: D3 and TopoJSON use clockwise winding. (Spherical polygons can be larger than a hemisphere! See also ST_ForceRHR in PostGIS.)
多邊形和折線的投影還必須處理球體與平面之間的拓?fù)洳町悺Ｒ恍┩队靶枰┻^(guò)對(duì)向子午線切割球體樱蛤，另一些投影需要將球體裁剪成一個(gè)大圓钮呀。此外剑鞍，球形多邊形需要一個(gè)環(huán)繞的順序約定來(lái)決定多邊形的哪邊是內(nèi)側(cè)：D3和TopoJSON采用的是順時(shí)針順序。（球面多邊形可以大于半球爽醋！另請(qǐng)參見(jiàn)PostGIS中的ST_ForceRHR蚁署。）
D3’s approach affords great expressiveness: you can choose the right projection, and the right aspect, for your data. D3 supports a wide variety of common and unusual map projections. For more, see Part 2 of The Toolmaker’s Guide.
D3提供了豐富的表現(xiàn)力：您可以為您的數(shù)據(jù)選擇正確的投影和正確的方面。D3提供多種常見(jiàn)和不常見(jiàn)的地圖投影蚂四。有關(guān)更多信息光戈，請(qǐng)參閱 The Toolmarker's Guide的Part2 。
D3 uses GeoJSON to represent geographic features in JavaScript. (See also TopoJSON, an extension of GeoJSON that is significantly more compact and encodes topology.) To convert shapefiles to GeoJSON, use ogr2ogr, part of the GDAL package. In addition to map projections, D3 includes useful spherical shape generators and spherical math utilities.
D3使用GeoJSON來(lái)展示JavaScript中的地理要素遂赠。（另請(qǐng)參閱TopoJSON田度，它是GeoJSON的擴(kuò)展，它大大的壓縮和編碼了拓?fù)洳季纸夥摺＃┮獙hapefiles轉(zhuǎn)換為GeoJSON，請(qǐng)使用ogr2ogr乎莉，它是GDAL軟件包的一部分送讲。 除了地圖投影，D3包括有用的球形生成器和球面數(shù)學(xué)實(shí)用工具惋啃。
安裝
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script>
var projection = d3.geoAlbers(),
path = d3.geoPath(projection);
</script>
地圖數(shù)據(jù)
如何獲取中國(guó)地圖的 GeoJSON 文件呢哼鬓，真的有點(diǎn)麻煩，可以參照： https://github.com/clemsos/d3-china-map 進(jìn)行制作边灭。
Mark
- 中國(guó)地圖的 GeoJSON 文件： china.geojson
- 各縣的JSON地圖文件：mapdata.zip
解壓縮后有兩個(gè)文件夾和一個(gè) JSON 文件：
geometryCouties：各市~縣的數(shù)據(jù)
geometryProvince：各省~市的數(shù)據(jù)
china.json：中國(guó)~省的數(shù)據(jù) - 【 地圖系列 】 世界地圖和主要國(guó)家的 JSON 文件:
http://www.ourd3js.com/wordpress/668/
API
Paths
地理路徑生成器d3.geoPath類(lèi)似于d3-shape中的形狀生成器：給定GeoJSON幾何結(jié)構(gòu)或特征對(duì)象异希，它生成SVG path數(shù)據(jù)字符串或渲染到Canvas的path。 動(dòng)態(tài)或交互式投影中推薦使用Canvas绒瘦，以提高性能称簿。 Path數(shù)據(jù)可以在投影或變換一起使用，也可用于將平面幾何直接渲染成Canvas或SVG惰帽。
var path = d3.geoPath(projection); //創(chuàng)建一個(gè)新的地理路徑生成器憨降。
path(object); //返回對(duì)象的路徑;
path.area(object) //計(jì)算給定要素的投影面積;
path.bounds(object) //計(jì)算給定要素的投影邊界。
path.centroid(object) //計(jì)算給定要素的投影中心该酗。
path.context(context) //設(shè)置渲染上下文,可設(shè)置canvas的context授药。
path.context() //取得渲染上下文。
path.pointRadius(radius) //設(shè)置點(diǎn)要素的半徑呜魄。
path.pointRadius() //取得點(diǎn)要素的半徑悔叽。
path.projection(projection) //設(shè)置地理投影。
path.projection() //設(shè)置地理投影爵嗅。
Projections（投影）
投影將球形多邊形轉(zhuǎn)換為平面多邊形娇澎。 D3提供了幾類(lèi)標(biāo)準(zhǔn)投影的實(shí)現(xiàn)：
var projection = d3.geoMercator();
projection(point) // 投影指定的位置,參數(shù)為經(jīng)緯度[longitude,latitude],獲得指定位置的坐標(biāo)[x,y]。
projection.invert(point) // 為指定的位置反轉(zhuǎn)投影,參數(shù)為[x,y],獲得指定坐標(biāo)的經(jīng)緯度[longitude,latitude]睹晒。
projection.stream(stream) // 包裝指定的流監(jiān)聽(tīng)器九火，投影輸入的幾何圖形赚窃。
projection.clipAngle(angle) //設(shè)置投影的裁剪圓半徑，指定角度并返回投影岔激。如果角度為null勒极，切換到子午線切割，而不是小圈的裁剪虑鼎。
projection.clipAngle() //返回當(dāng)前裁剪的角度辱匿，默認(rèn)為空。小圈裁剪是獨(dú)立于通過(guò)clipExtent的視窗裁剪炫彩。
projection.clipExtent(extent) // 設(shè)置投影的剪輯視窗范圍為指定的邊界（以像素為單位）匾七。extent 范圍邊界被指定為一個(gè)數(shù)組[[x0, y0], [x1,y1]]，其中x0 是視窗的左側(cè)江兢，y0 是頂部昨忆，x1 為右側(cè)和y1 是底部。如果范圍為null杉允，則視窗裁剪不執(zhí)行邑贴。
projection.clipExtent() // 返回當(dāng)前視窗裁剪的范圍，默認(rèn)為null叔磷。視窗裁剪是獨(dú)立于通過(guò)clipAngle的小圈剪裁拢驾。
projection.scale(scale) // 設(shè)置投影的比例尺為特定的值，并返回投影改基。
projection.scale() // 返回投影的比例尺繁疤。
projection.translate(point) // 如果point 點(diǎn)指定了，則設(shè)置投影轉(zhuǎn)變的位移為指定的二元數(shù)組[x, y]并返回的投影秕狰。如果未指定點(diǎn)稠腊，則返回當(dāng)前變換的位移，默認(rèn)為[480, 250]鸣哀。變換的位移確定投影的中心像素坐標(biāo)麻养。默認(rèn)轉(zhuǎn)換位移的位置是?0°,0°?，在一個(gè)960×500區(qū)域的中心诺舔。
projection.center(location) //如果center 重心指定了鳖昌，則設(shè)置投影中心為指定的位置，經(jīng)度和緯度度數(shù)的兩元數(shù)組低飒，并返回投影许昨。如果沒(méi)有指定中心，則返回當(dāng)前的中心褥赊，默認(rèn)為?0°,0°?糕档。
projection.rotate(rotation) // 如果rotation 旋轉(zhuǎn)指定了，設(shè)置投影的三軸旋轉(zhuǎn)為指定的角度λ，φ和γ（偏航角速那，傾斜角和滾動(dòng)角俐银，或等效地經(jīng)度，緯度和滾動(dòng)）端仰，以度并返回投影捶惜。如果rotation 未指定，返回當(dāng)前缺省的轉(zhuǎn)動(dòng)值[0, 0, 0]荔烧。如果rotation 指定且只有兩個(gè)值吱七，而不是3個(gè)值，那么滾動(dòng)的角度被假設(shè)為0°鹤竭。
projection.precision(precision) // 如果precision 精度指定了踊餐，則設(shè)置投影自適應(yīng)重采樣的臨界值為指定的值，以像素為單位臀稚，并返回投影吝岭。此值對(duì)應(yīng)于Douglas–Peucker 距離。如果precision 精度沒(méi)有指定吧寺，則返回投影當(dāng)前重采樣的精度窜管，其精度默認(rèn)為Math.SQRT(1/2)。0的精密度禁止自適應(yīng)重采樣撮执。
projection.fitExtend(extend,object) // 設(shè)置給定范圍，對(duì)投影進(jìn)行縮放和平移舷丹，以適合給定的范圍并居中抒钱。 范圍指定為數(shù)組[[x 0，y 0]颜凯，[x 1谋币，y 1]]，其中x 0是邊界框的左邊症概，y 0是頂部蕾额，x 1是右邊，y 1是底部彼城。 返回投影诅蝶。
projection.fitSize(size,object) // fitExtend的簡(jiǎn)單寫(xiě)法，左上角為[0,0]募壕。
antimeridian cutting：http://bl.ocks.org/mbostock/3788999
示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{ background: #21395b; }
</style>
</head>
<body>
<svg></svg>
<script src="/bower_components/d3/d3.js"></script>
<script>
var width = 1300;
var height = 1000;
var padding = 20;
var g = d3.select('svg')
.attr('width',width)
.attr('height',height)
.append('g');
var root;
var projection,path;
function color(i) { return '#0e2338'; }
d3.json('china.json',function (data) {
root = data;
//設(shè)置投影
projection = d3.geoMercator()
projection.fitExtent([[padding,padding],[width-padding*2,height-padding*2]],root);
//projection.fitSize([width,height],root);
//生成地理路徑
path = d3.geoPath(projection);
update();
});
function update() {
g.selectAll("path")
.data(root.features)
.enter()
.append("path")
.attr("stroke","#234060")
.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","green");
})
.on("mouseout",function(d,i){
d3.select(this)
.attr("fill",color(i));
});
g.selectAll("text")
.data(root.features)
.enter()
.append("text")
.attr("text-anchor","middle")
.attr("dy",".3em")
.attr("fill", "#eee")
.style("font-size", "10px")
.text(function (d) {
return d.properties.name;
})
.attr("transform", function (d) {
return "translate("+projection(d.properties.cp).join(',')+")";
});
}
</script>
</body>
</html>
