javascript - D3 map SVG 性能

Question

过去几天我一直在努力优化 D3 map 上的性能，尤其是在移动设备上。我正在使用 SVG 变换进行缩放和平移，但进行了以下观察:矫枉过正来自用于伪造国家之间间距的路径笔划。

我上传了一对示例 map 以供比较:

http://www.nicksotiriadis.gr/d3/d3-map-1.html

http://www.nicksotiriadis.gr/d3/d3-map-2.html

两张 map 之间的唯一区别是沿乡村道路的笔划路径，性能差异在桌面设备上什至很明显 - 但在移动设备上更明显。删除路径笔划使移动性能变得轻而易举..

我尝试了各种 svg 笔画形状渲染选项，但没有取得显着效果。

现在进入问题。有什么方法可以从每个国家/地区移除细边界以伪造国家/地区之间的间距而不是使用笔划？

如果其他人有不同的建议，我很乐意听取!

更新:附上解释照片。

我画的是这个。红色箭头指向乡村关节。当在国家路径上添加与背景颜色相同的笔划时(此处以深灰色描绘)，它会产生国家分离的感觉 - 然而这会严重影响移动设备的性能。我正在寻找的是以某种方式重新塑造国家/地区的路径，以便它们的边界线位于蓝色箭头指向的位置，但没有中风。

更新 2:人们似乎无法理解我在寻找什么，所以我正在更新它以使问题更清楚。

让我们假设原始国家/地区路径显示在该图像的左侧。我正在寻找一种方法，我可以以某种方式向内“收缩”路径，以便以红色显示的新创建路径在它们之间留出足够的空白空间，从而“模拟”它们之间的笔画。

这样做，将不会留下额外的笔画层，从而通过仅使用路径而不是路径+笔画来提高性能。

更新 2: 您好，我的问题似乎找到了一半的解决方案。我设法将 topojson 提取到 shapefile，按照我想要的方式编辑 shapefile(使用名为 OpenJump 的程序)，但是转换带走了我需要的所有 topojson 属性——id、国家名称，所以我无法转换回原始的topojson。

有人有什么建议吗？

Answer 1

D3 有专门的东西:topojson.mesh() (参见 documentation)。这个想法是，由于大多数国家/地区共享边界，因此无需两次绘制共享边界。如果每个边框只绘制一次，则需要绘制的笔划数最多可减少 80%。 mesh 方法执行 javascript 处理，将一堆闭合形状(国家/地区)转换为仅包含它们之间边界的多线路径。然后，您可以将该多行路径绘制成单个 <path>您放置在填充顶部的对象。

网格看起来like this .这是 another example .