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

Question

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

添加区域边框时出现问题

svgMap.append("path")
  .attr("class", "reg_contour")
  .datum(topojson.mesh(fr[0], fr[0].objects.reg_GEN_WGS84_UTF8, function(a, b) { return a !== b; }))
  .attr("d", path);

这是我的代码：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 中的修复几何工具，我得到了一个很好的边界（当使用与此处第一张图像相同的代码显示时）：

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

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

d3js v5 + Topojson v3 Map with border rendering

javascript

d3.js

topojson