D3映射SVG性能

Question

D3映射SVG性能

sco*_*ord 8 javascript performance svg d3.js

过去几天我一直在努力优化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

mee*_*mit 9

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

网格看起来像这样.这是另一个例子.