地理空间坐标通常用于天气或人口数据. D3.js为我们提供了三种地理数据工具 :
路径 : 它们产生最终像素.
预测 : 他们将球体坐标转换为笛卡尔坐标，
Streams : 他们加快了速度.
在了解D3.js中的地理位置之前，我们应该了解以下两个术语和减号;
D3地理路径和
预测
让我们详细讨论这两个术语.
这是一个地理路径生成器. GeoJSON生成SVG路径数据字符串或呈现Canvas的路径.建议使用Canvas进行动态或交互式投影以提高性能.要生成D3地理路径数据生成器，您可以调用以下函数.
d3.geo.path()
这里， d3.geo.path()路径生成器功能允许我们选择我们想要用于从地理坐标转换到哪个地图投影笛卡尔坐标.
例如，如果我们想要显示印度的地图细节，我们可以定义如下所示的路径.
var path = d3.geo.path()
svg.append("path")
.attr("d", path(states))投影将球面多边形几何转换为平面多边形几何. D3提供以下投影实现.
Azimuthal : 方位角投影将球体直接投射到平面上.
复合 : Composite由多个投影组成，这些投影组成一个显示.
圆锥曲线 : 将球体投影到圆锥体上，然后将圆锥体展开到平面上.
圆柱形 : 圆柱投影将球体投射到一个容纳圆柱体上，然后将圆柱体展开到平面上.
要创建新投影，您可以使用以下函数.
d3.geoProjection(project)
它从指定的原始投影项目构建新投影.项目函数以弧度为单位获取给定点的经度和纬度.您可以在代码中应用以下投影.
var width = 400 var height = 400 var projection = d3.geo.orthographic() var projections = d3.geo.equirectangular() var project = d3.geo.gnomonic() var p = d3.geo.mercator() var pro = d3.geo.transverseMercator() .scale(100) .rotate([100,0,0]) .translate([width/2, height/2]) .clipAngle(45);
在这里，我们可以应用上述任何一个预测.让我们简单讨论一下这些预测.
d3.geo.orthographic() : 去;正投影是适合于显示单个半球的方位角投影;透视点在无穷远处.
d3.geo.gnomonic() : gnomonic投影是一个方位角投影，将大圆投影为直线.
d3.geo.equirectangular() : equirectangular是最简单的地理投影.身份功能.它既不是等面积也不是保形，但有时用于栅格数据.
d3.geo.mercator() : ;球形墨卡托投影通常由平铺映射库使用.
d3.geo.transverseMercator() : 横向墨卡托投影.
让我们在此创建印度地图例.为此，我们应遵循以下步骤.
第1步 : 应用样式 : 让我们使用下面的代码在地图中添加样式.
<style>
path {
stroke: white;
stroke-width: 0.5px;
fill: grey;
}
.stateTN { fill: red; }
.stateAP { fill: blue; }
.stateMP{ fill: green; }
</style>在这里，我们为州TN，AP和MP应用了特定的颜色.
步骤2 : 包括topojson脚本 : TopoJSON是GeoJSON的扩展，它编码拓扑，定义如下.
<script src = "http://d3js.org/topojson.v0.min.js"></script>
我们可以在编码中包含此脚本.
第3步 : 定义变量 : 使用下面的代码在脚本中添加变量.
var width = 600; var height = 400; var projection = d3.geo.mercator() .center([78, 22]) .scale(680) .translate([width / 2, height / 2]);
这里，SVG宽度为600，高度为400.屏幕是一个二维空间，我们试图呈现一个三维物体.因此，我们可以使用 d3.geo.mercator()函数严重扭曲地面大小/形状.
指定中心[78,22]，这将投影的中心设置为指定位置，作为经度和纬度的双元素数组，以度为单位并返回投影.
此处，地图位于西经78度和22 °North.
将Scale指定为680，这会将投影的比例因子设置为指定值.如果未指定比例，则返回当前比例因子，默认为150.重要的是要注意比例因子在预测中不一致.
步骤4 : 附加SVG : 现在，附加SVG属性.
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);第5步 : 创建路径 : 以下代码部分创建了一个新的地理路径生成器.
var path = d3.geo.path() .projection(projection);
这里，路径生成器(d3.geo.path())用于指定投影类型(.projection)，之前定义为使用可变投影的墨卡托投影.
第6步 : 生成数据 : indiatopo.json - 这个文件包含很多记录，我们可以从以下附件轻松下载.
下载 indiatopo.json文件
下载文件后，我们可以添加我们的D3位置.样本格式如下所示.
{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,
25,26,27,28,29,30,31,32,33,34]],[[35,36,37,38,39,40,41]],[[42]],
[[43,44,45]],[[46]],[[47]],[[48]],[[49]],[[50]],[[51]],[[52,53]],
[[54]],[[55]],[[56]],[[57,58]],[[59]],[[60]],[[61,62,63]],[[64]],
[[65]],[[66]],[[67]],[[68]],[[69]],[[-41,70]],
[[71]],[[72]],[[73]],[[74]],[[75]]],
"properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[[76,77,78,79,80,81,82]]],
"properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[[83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99,100,101,102,103]],
[[104,105,106,107]],[[108,109]]], ......
........................................第7步 : 绘制地图 : 现在，从 indiatopo.json 文件中读取数据并绘制地图.
d3.json("indiatopo.json", function(error, topology) {
g.selectAll("path")
.data(topojson.object(topology, topology.objects.states)
.geometries)
.enter()
.append("path")
.attr("class", function(d) { return "state" + d.id; })
.attr("d", path)
});在这里，我们将使用印度地图(indiatopo.json)的坐标加载TopoJSON文件.然后我们声明我们将对图形中的所有路径元素进行操作.它定义为，g.selectAll("path").然后，我们将从TopoJSON文件中提取定义国家/地区的数据.
.data(topojson.object(topology, topology.objects.states) .geometries)
最后，我们将使用 .enter()将它添加到我们要显示的数据中方法然后我们使用 .append("path")方法将该数据作为路径元素追加.
