D3地图SVG性能优化

Question

D3地图SVG性能优化

javascriptperformanced3.jssvg

8

我过去几天一直在努力优化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，并使用名为OpenJump的程序编辑了想要的形状文件，但是转换会去除我需要的所有topojson属性——id、国家名称，因此我无法将其转换回原始的topojson。

有人有任何建议吗？

- scooterlord

你是说你不需要 http://www.nicksotiriadis.gr/d3/d3-map-1.html 中国家周围的浅白色边框吗？ - Cyril Cherian

完全相反；我想在国家之间留有间隔，但这个间隔不应使用描边线。 - scooterlord

我不明白问题。你可以给我创建一个你想要的图片吗？当我比较这些地图时，它们的速度是一样的。我没有在手机上进行测试。 - kwoxer

你好，感谢您的关注。我已经更新了问题。 - scooterlord

1

除了使用 topojson 之外，简化路径以减少点数以加快渲染速度也是值得考虑的。请查看此链接：http://mourner.github.io/simplify-js/。 - Maksym Kozlenko

3个回答

4

终于找到答案了。这极大地改善了d3地图的性能！

1）我拿到了我的topojson文件，并使用mapshaper.org将其提取到shapefile中。这会产生3个文件：.shp、.shx、.dbf。从我所知，.dbf 文件保存了所有的TopoJSON属性。

2）打开.shp形状文件到OpenJUMP http://www.openjump.org/ - 这也自动导入了.dbf文件。

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

4）选中更新源层中的几何形状框，以便在不丢失其余属性/属性的情况下编辑几何形状并添加负的固定距离-0.1。这样就缩小了所有的国家几何形状，得到了我要找的结果。

5）将数据集另存为ESRI Shapefile

6）重新导入BOTH .shp 和 .dbf 文件到生产自OpenJUMP的mapshaper.org中，注意，是BOTH文件。

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

- scooterlord

非常抱歉链接已经失效，我会尽快更新它们。 - scooterlord

这样做只是移除了我所有国家周围的一定半径内的土地，性能仍然保持不变:/ - lpetrucci

1

这种情况可能有几个原因（在我的电脑上，同样的速度一切正常）：

浏览器

你使用哪个浏览器？在Chrome上，你的例子可以完美运行。

TopoJson

例如，前面的答案。

动画

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

--

如果以上方法都没有解决你的问题，并且你希望在移动设备上更好地运行，可以尝试混合使用D3和Leaflet（适用于移动设备的地图），这样做在加载瓦片方面性能很好。

例如：

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

希望它有所帮助。

- Yoann

这个问题在移动设备上非常明显 - 我在Android和我的iPhone 6上都看到了它。在平移缩放时会出现该问题。 - scooterlord

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- meetamit · Accepted Answer

D3有一个专门的方法来解决这个问题：topojson.mesh()（请参见文档）。其思路是，由于大多数国家共享边界，因此没有必要重复绘制共享边界。如果您只能绘制每个边界一次，则可以将要绘制的笔画数量减少高达80％。该网格方法执行JavaScript处理，将一堆封闭形状（国家）转换为它们之间仅有的边界的多行路径。然后，您可以将该多行路径绘制到单个<path>对象中，并将其定位在填充上方。

该网格看起来像这样。这里是另一个示例。