截图2018-11-19 10.37.23.png
一. 目前中国地图的地理文件格式有两种，GeoJSON和TopoJSON。
GeoJSON
GeoJSON 是一种用于描述地理空间信息的数据格式。 GeoJSON 并不是一种新格式。其语法规范与JSON格式一致，但其名称是标准化的，专门用于表示地理信息。
GeoJSON 的最外层是单个对象。该对象可以代表：
几何特征特征集合
最外层的GeoJSON 可能包含许多子对象。每个GeoJSON 对象都有一个type 属性，指示对象的类型。 type 的值必须是以下之一。点：点。多点：多个点。线串：线。 MultiLineString：多行。多边形：面。 MultiPolygon：多面的。 GeometryCollection：几何集合。特点：特征。特征集合：特征集合。
比如下面的代码点对象：
{
"类型": "点",
"坐标": [-135, 39]
线对象：
{
"类型": "线串",
"坐标": [[-135, 39], [-137, 38]]
}目的：
{
"类型": "多边形",
"坐标":[[ [30, 0], [31, 0], [31, 5], [30, 5], [30, 0] ]]
}从上面的格式可以发现，每个对象都有一个成员变量copies。如果type 的值为Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon 之一，则该对象必须具有变量坐标。
如果type的值为GeometryCollection（几何集合），那么该对象必须具有变量geometry，其值为一个数组，数组中的每一项都是一个GeoJSON几何对象。例如：
{
"类型": "几何集合",
"几何": [
{
"类型": "点",
"坐标": [100, 40]
},
{
"类型": "线串",
"坐标": [ [100, 30], [100, 35] ]
}
]
}如果type的值为Feature，那么这个特征对象必须包含变量geometry，它表示几何体，并且geometry的值必须是一个几何体对象。这个特征对象还包含一个属性，它代表特征。属性的值可以是任何JSON 对象或null。例如：
{
"类型": "功能",
"属性": {
"姓名": "北京"
},
"几何": {
"类型": "点",
“坐标”: [116.3671875, 39.977120098439634]
}
}如果type的值为FeatureCollection，则该对象必须有一个名为features的成员。 features的值是一个数组，数组中的每一项都是一个feature对象。
TopoJSON
TopoJSON 是拓扑编码的GeoJSON 的扩展形式，由D3 的作者Mike Bostock 制定。与GeoJSON 直接使用Polygon、Point 等几何图形来表示图形的方法相比，TopoJSON 中的每个几何图形都是由共享边（称为弧）组成。
TopoJSON 消除了冗余并将文件大小减少了80%，因为：
边界线只记录一次（例如广西和广东的交界线只记录一次）。地理坐标使用整数，而不是浮点数。
引用自ourd3js.com
二. 准备D3JS， 构建最简单的中国地图
如上所述，地理JSON 文件分为TopoJSON 和GeoJSON。现在我们使用TopoJSON来完成接下来的构建。
项目中引入两个lib来生成投影和相对于路径生成器的投影#生成路径生成器
生成路径（缩放）{
让自我=这个；
var 投影=self.generateProjection(scale);
返回d3.geoPath().projection(projection);
},
#生成投影
生成投影（缩放）{
var svg=d3.select("svg"),
宽度=svg.attr("宽度"),
高度=svg.attr("高度");
返回d3.geoMercator()
.center([105, 31])
.scale(比例尺)
.translate([宽度/2,高度/2+高度/6])
}, 获取中国地图数据initChinaMap() {
让自我=这个；
var 路径=self.generatePath(950);
var pathCubier=self.generatePath(958);
var 颜色=函数(i) {
返回d3.color("#02005A");
};
var svg=d3.select("svg");
d3.json("/static/js/china-topo.json", 函数(错误， 根) {
如果（错误）
返回console.error(错误);
//绘制阴影背景
svg.append("g")
.attr("过滤器", "url(#f1)")
.attr("填充", "rgba(45,107,253,1)")
.attr("样式", "border: 1px 实心#fff;")
.selectAll("路径")
.data(topojson.feature(root, root.objects.china).features)
。进入（）
.append("路径")
.attr("中风", "rgba(45,107,253,1)")
.attr("笔划宽度", 1)
.attr("填充", "rgba(45,107,253,1)")
.attr("d",pathCubier)
.select("圆")
.data(topojson.feature(root, root.objects.china).features)
。进入（）
.append("圆")
.attr("cx", "0")
.attr("cy", "0")
.attr("r", 500)
.attr("填充", "透明")
//绘制三维层次感
svg.append("g")
.attr("填充", "#59acc8")
.selectAll("路径")
.data(topojson.feature(root, root.objects.china).features)
。进入（）
.append("路径")
.attr("中风", "#59acc8")
.attr("笔划宽度", 1)
.attr("填充", "#59acc8")
.attr("d",pathCubier)
//绘制中国地图
svg.append("g")
.attr("填充", "#02005A")
.selectAll("路径")
.data(topojson.feature(root, root.objects.china).features)
。进入（）
.append("路径")
.attr("中风", "#1C98C8")
.attr("笔划宽度", 1)
.attr("填充", 函数(d, i) {
返回颜色（i）；
})
.attr("d", 路径)
.append("标题")
.text(函数(d) {
//console.log("d", d)
返回d.properties.name；
})
});
}，为了绘制地图的三维效果和阴影效果，将整个地图分为三个部分。先画阴影部分。
截图2018-11-19 上午10.42.33.png
然后画出三维部分
数据可视化实践：运用D3技术绘制精美中国地图的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、数据可视化实践：运用D3技术绘制精美中国地图的信息别忘了在本站进行查找哦。
【数据可视化实践：运用D3技术绘制精美中国地图】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
这个题目好酷！我一直想学数据可视化，波奇和d3都很有意思。
有8位网友表示赞同！
终于有人把d3用在中国的地理信息上啦，期待看到最终效果！
有7位网友表示赞同！
我想知道这个中国地图会展现什么数据？人口密度吗？经济指标吗？
有11位网友表示赞同！
画地图确实要注重细节，希望作者能够体现中国各个地区的特色。
有18位网友表示赞同！
d3这么强大的一款工具，用它来做中国地图真的很有创意。
有8位网友表示赞同！
学习波奇的数据可视化方法，能提高我的数据分析水平吗？
有17位网友表示赞同！
这篇文章会不会提供一些详细的代码示例？想跟着学一学！
有7位网友表示赞同！
制作一个好看的中国地图需要哪些设计技巧？可以分享一下吗？
有14位网友表示赞同！
我很想知道这种数据可视化方式的应用场景，在哪里会用到呢？
有8位网友表示赞同！
做完这个中国地图之后，还能继续使用d3做什么其他项目吗？
有10位网友表示赞同！
希望作者能够讲解每个步骤详细，方便我更好地理解和学习。
有15位网友表示赞同！
我觉得把数据可视化与地理信息结合很有意思，能让我们更直观地了解情况。
有5位网友表示赞同！
这种方法会不会比较耗时？制作一个精美的中国地图需要多长时间呢？
有10位网友表示赞同！
我还在寻找一些关于数据可视化的学习资源，这篇文章看起来很不错。
有12位网友表示赞同！
用d3来制作地图比其他工具更有优势吗？有什么具体区别吗？
有9位网友表示赞同！
看了这个标题我感觉很有启发，期待作者带来更多精彩的实践分享！
有16位网友表示赞同！
数据可视化越来越重要了，这种利用d3绘制中国地图的方法很实用。
有6位网友表示赞同！
希望作者能够定期更新一些新的数据可视化案例，让我持续学习！
有17位网友表示赞同！
我喜欢这个标题中的“波奇”一词，有新意，让人更想去了解这篇文章的内容。
有11位网友表示赞同！
我要收藏这篇文章，以后可以参考学习一下d3制作中国地图的技巧。
有6位网友表示赞同！