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：人们似乎无法理解我在寻找什么，所以我正在更新这个以使问题更加清晰。

我们假设原始国家/地区路径显示在此图片的左侧。我正在寻找的是一种我可以以某种方式“契约”的方式。向内的路径，以便新创建的路径显示为红色，在它们之间留下足够的空白空间，以便模拟＆＃39;他们之间的中风。

这样做，不会有额外的笔画层，因此只使用路径而不是路径+笔画来获得性能。

更新2：再次问好，我似乎找到了解决问题的半解决方案。我设法将topojson提取到shapefile，按照我想要的方式编辑shapefile（使用名为OpenJump的程序），但转换会删除我需要的所有topojson属性 - id，country name，所以我无法转换回来原来的topojson。

有人有任何建议吗？

Answer 1

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

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

Answer 2

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

<强>浏览器

您使用的是哪种浏览器？在Chrome上，您的例子工作正常。

<强> TopoJson

例如。上一个答案。

<强>动画

您正在加载页面时启动动画。您可能想要添加延迟（animation（）。延迟（以毫秒为单位））。 D3中还有一个函数：queue（），https://github.com/mbostock/queue，它在启动函数之前加载数据。

-

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

一个例子：

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

希望有所帮助

Answer 3

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

1）我获得了topojson文件并使用mapshaper.org解压缩到shapefile。这提供了3个文件： .shp，.shx，.dbf 。从我意识到 .dbf 文件包含所有TopoJSON属性/属性。

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

3）我选择了国家/地区图层并转到工具＆gt;分析＆gt;缓冲

4）选中Update geometry in source layer框以便编辑几何图形而不会丢失其余的属性/属性，并添加负固定距离-0.1 。这使得所有国家的几何形状都缩小到我想要的结果。

5）将数据集保存为ESRI Shapefile

6）将从OpenJUMP生成的 BOTH .shp和.dbf 重新导入 mapshaper.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