代码之家 › 专栏 › 技术社区 › Nick B

如何在返回页面时阻止D3.js阻塞

c3.js d3.js

Nick B · 技术社区 · 10 年前

我目前有一个web应用程序,它同时使用本机d3图表和使用c3.js图表模块的图表。

由于数据变化,我的图表每1-2秒更新一次,屏幕上随时可能有3-4个图表。

我注意到,如果我在chrome中更改选项卡或最小化窗口,当我返回选项卡时,d3.js会在d3_timer_step中花费很长时间完全锁定UI 5秒以上(取决于用户离开选项卡的时间),如果用户离开选项卡30分钟左右,这基本上可以锁定UI几分钟。

我假设正在发生的是,当窗口模糊时,d3动画正在排队,然后当它再次聚焦时,只是敲打UI线程。

显然,当窗口不可见时,我可以(而且可能无论如何)停止更新图表,但我的问题是,是否有其他人发现了这个问题,他们的解决方案是什么?e、 g.d3中是否有限制动画缓冲区的选项或类似选项?

2 回复 | 直到 10 年前

AlexGL 8 年前

在我的例子中,0.4.11不会改变任何东西(甚至chart.destroy()也不会做出令人惊讶的事情)。核心问题是c3js继续计划d3过渡,即使在当前被模糊和破坏。D3将所有转换推迟到选项卡被聚焦,然后BAM-在单个阻塞请求中执行每一个。

如果是这种情况,您可以将图表的全局过渡持续时间更改为 0 或 null 大多数内部c3函数依赖于转换持续时间作为标志来执行转换或不执行转换(在0的情况下)。

aendra 8 年前

我是C3维护人员。

我的猜测是,你使用的是一个非常旧的C3版本(0.4.9);0.4.11修复了这个问题,我认为有一个bug data.load 。请尝试更新您的版本!

推荐文章

Eddie Worthington · D3.js指针相对于轴域的坐标

2 年前

b404 · 如何在d3 react typescript应用程序中正确设置“path”元素中属性“d”的类型

2 年前

user6456564 · 双条形图创建

6 年前

MetalCat · 在d3中,如何在地图上的鼠标上方显示多个值?

6 年前

atdyer · 使用svg变换更新位置时,力模拟会出现抖动

6 年前

MTT · 最适合散点图的回归

6 年前

Cyley Simon · 以chile/name格式将Csv转换为json

6 年前

Himani · 线图和面积图之间的颜色不同

6 年前

Francis Katalinic · d3。使用d3通过ajax响应实现JSJSON。json()

6 年前

user9646441 · 为什么这个svg和数组会在angular中多次启动?

6 年前