d3js v5 + Topojson v3带边框渲染的地图

Question

我回来找个问题。我还在学习d3js 5天，我对边框渲染有一个问题。 为什么我有这个？

添加区域边框时会出现问题。

.do(new myActions.SomeSuccessAction)

这是我的代码：https://plnkr.co/edit/mD1PzxtedWGrZd5ave28?p=preview

仅为了记录，json文件组合了两个层（部门和区域），这些层使用相同的shp创建并由QGIS编译以用于geojson输出。之后我通过mapshapper将其转换为topojson。

Answer 1

错误在于您的topojson - 两个不同的要素类型，部门和地区沿着共同的边界不共享相同的坐标。

首先，在这种情况下，需要检查以确保没有分层问题（通常会在其他功能上绘制其他功能，隐藏它们或部分功能），我们可以通过显示区域来实现界限：

（plunkr）

所以问题不能分层，如果我们看一下topojson中的特定功能，比如Creuse部门：

{"arcs":[[-29,-28,-27,-26,202,-297,-296,205,-295,-410,419]],"type":"Polygon","properties":{"codgeo":"23","pop":120581,"libgeo":"Creuse","libgeo_m":"CREUSE","codreg":"75","libreg":"Nouvelle Aquitaine"}}

我们看到使用11个弧来绘制部门，这些弧代表边界的每个部分，基于多个要素之间的共享边界，因此共享边界仅在数据中表示一次。

如果我们放大Creuse，我们可以看到在其他部门，地区之间或根本没有任何东西共享的11个弧段：

边界的粗大部分对应于问题中图像中的粗白边界，我只更改了原始plunkr的样式和缩放

这看起来有问题，部门应该只有6个弧：

为什么会有额外的弧线？由于部门的边界没有正确对齐 - 部门之间的共享边界并不总是在topojson中共享相同的弧。部门可能使用与区域不同的比例，不同的精度或投影，或者以不同的方式制作。这导致了微小的几乎难以察觉的差异，导致共享坐标的边界在数据中不共享相同的坐标，因此共享弧无法识别。

因为您正在生成这样的网格：

topojson.mesh(fr[0], fr[0].objects.reg_GEN_WGS84_UTF8, function(a, b) { return a !== b; })

仅绘制共享边界，这解释了差距。

我们可以通过几种方式纠正这种情况，最简单的方法是完全删除这些区域。各部门记录了他们所在的地区，如果该边界两边的部门位于不同的地区，我们可以检查是否应该绘制边界：

.datum(topojson.mesh(fr[0], fr[0].objects.dep_GEN_WGS84_UTF8, function(a, b) { return a.properties.libreg !== b.properties.libreg; }))

这给了我们：

（plunkr）

或者，我们可以通过将区域边界导入到ArcGIS等GIS平台并修复几何体来重新区域化。我们还可以导入部门并根据溶解中的区域属性创建新图层。使用Arc中的修复几何工具，我得到一个很好的边界（当显示与第一个图像相同的代码时）：

还有其他方法，例如在对齐弧线时包含公差，但这些方法可能比上述方法更难。