javascript - D3 + Leaflet, only draw if visible(大数据vis)

标签 javascript svg d3.js leaflet

为了在传单 map 上具有大量 svg 路径、svg 文本和 svg textpath 元素的合理性能,我想知道 D3 如何处理当前不在屏幕上的元素。

因此,例如,当我放大到华盛顿州等区域时,世界上 99.9% 的区域都没有显示——D3 的默认行为是否会不顾一切地绘制所有其他元素?

我的项目基于 Mike Bostocks d3 + leaflet example .没有使用 viewports/viewbox 属性 - 它是在其他地方完成的吗?感谢您的输入。

最佳答案

我认为这个问题有两个部分

  1. 绘制屏幕外的 SVG DOM 元素

    正如@LarsKotthoff 提到的,这些可能不值得担心,因为浏览器可能会比您更好地优化它们。

  2. 处理数据会导致 SVG DOM 元素被绘制出屏幕。

    我认为这是您可以有所作为的地方。如果您有昂贵的数据操作/处理,那么处理不会显示的东西似乎是在浪费周期。我能想到的改善这种情况的唯一方法是尽早确定某些内容是否会超出屏幕范围。如果它要离开屏幕,则在进行任何进一步的数据处理时忽略它。

    不过,在这些情况下,您需要一种方法来检测它何时进入 View 或移出 View ,以及是否进行处理,视情况而定。这可能会导致一些额外的开销,因此不值得这样做。

    您的个人情况将决定这对您的效果如何,但如果您有具体示例,则此处的用户可能能够协助重构以提高性能。

您还可以做其他事情,例如重新考虑可视化以首先需要更少的元素。根据我的经验,性能并不是真正的问题,直到屏幕上有太多信息以至于可视化的值(value)被削弱。删除无关信息已经提高了性能并提高了对可视化的理解。当然,这是我的特殊经历,肯定有不适用的时候。

关于javascript - D3 + Leaflet, only draw if visible(大数据vis),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29980323/

相关文章:

javascript - 您在 Internet Explorer 7/8 中遇到过 Dojo 1.7.1 的问题吗?

javascript - ReactJS 在指定的按键上显示模式弹出表单

javascript - 检测 svg 元素中圆圈上的触摸移动

d3.js - 更新嵌套数据

svg - d3.js 的问题 - 缩放路径形状

javascript - 错误 TS2349 : Cannot invoke an expression whose type lacks a call signature. 类型 '{ ; }' 没有兼容的调用签名

d3.js - 描边宽度 = 1px 的线条的外观

svg - inkscape 如何计算 "smooth edges"的控制点坐标?

javascript - 将数据从 Django 传递到 D3

javascript - 使用 jQuery 编写应用程序 - 如何存储变量?