D3 地图 SVG 性能

Question

过去几天我一直在努力优化 D3 地图的性能，尤其是在移动设备上。我正在使用 SVG 转换进行缩放和平移，但观察到以下情况：过度杀伤来自用于伪造国家之间间距的路径笔划。

我上传了一对示例地图进行比较：

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

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

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

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

现在回答问题。有没有什么办法可以去掉每个国家的细边框来伪造国家之间的间距而不是使用笔划？

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

更新：附上说明照片。

我画的是这个。红色箭头指向国家关节。当在国家路径中添加与背景相同颜色的笔触时（此处以深灰色表示），它会产生国家分离的感觉 - 但是这会严重影响移动设备的性能。我正在寻找的是以某种方式重新塑造国家路径，使它们的边界线位于蓝色箭头所指的位置，但没有中风。

更新 2：人们似乎无法理解我在寻找什么，所以我正在更新这个以使问题更加清晰。

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

这样做，额外的笔画层将毫无用处，从而通过仅使用路径而不是路径+笔画来获得性能。

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

有人有什么建议吗？

Answer 1

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

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

Answer 2

终于找到答案了。这从根本上提高了 d3 地图的性能！

1) 我得到了我的 topojson 文件并使用 mapshaper.org 提取到 shapefile。这给出了 3 个文件：.shp、.shx、.dbf。据我所知，.dbf 文件包含所有 TopoJSON 属性/属性。

2) 将 .shp 形状文件打开到 OpenJUMP http://www.openjump.org/ - 它也会自动导入 .dbf 文件。 p>

3) 我选择了国家图层并转到工具 > 分析 > 缓冲区。

4) 选中Update geometry in source layer 框，以便在不丢失其余属性/属性的情况下编辑几何图形并添加负的Fixed Distance -0.1。这将所有国家/地区的几何形状缩小到我正在寻找的结果。

5) 将数据集保存为 ESRI Shapefile

6) 将 OpenJUMP 生成的 BOTH .shp 和 .dbf 重新导入到 ma​​pshaper.org - 小心，两者都有文件。

7) 导出为 TopoJSON。包含新形状和所有原始属性/属性！

以下链接已更新为新制作的地图；我们有一个不需要笔画的“边框”外观。

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

将性能与具有原始形状 + 笔划的此链接进行比较。请在移动设备上试用以查看性能差异！

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

另外，如果有人想要一些额外的性能，这里是更新的世界地图 TopoJSON 文件！ :D

http://v7.nicksotiriadis.gr/d3/js/world-topo-bordered.json

Answer 3

这种行为可能有几个原因（在我的计算机上，一切都以相同的速度正常工作）：

浏览器

您使用哪种浏览器？在 Chrome 上，您的示例运行良好。

TopoJson

例如。以前的答案。

动画

页面加载时您正在启动动画。您可能想要添加延迟（animation().delay(in ms)）。 D3 中还有一个函数：queue(), https://github.com/mbostock/queue 在启动函数之前加载数据。

--

如果这些都不能改变您的问题，并且如果您希望它在移动设备上正常工作，您可以尝试混合使用 D3 和 Leaflet（用于移动设备的地图），通过加载图块，这在性能方面非常出色。

一个例子：

http://bl.ocks.org/zross/6a31f4ef9e778d94c204

希望对你有帮助