dc.js 图表选项卡在 Chrome 浏览器中在一段时间后从其他活动选项卡切换回来时冻结

如何解决dc.js 图表选项卡在 Chrome 浏览器中在一段时间后从其他活动选项卡切换回来时冻结

我在一个页面中有大约 10 个条形图，带有实时数据滴答，所有图表都根据这些滴答进行更新，而且效果很好。但是，如果我在 Chrome 中打开了多个选项卡，并且在我返回 dc.js 图表选项卡时查看其他站点一段时间后它会冻结，内存大小会迅速增加，并且需要很长时间才能恢复正常。我发现其他人使用 d3.js 报告了类似问题，mbostock 建议不要使用 setInterval 而是使用 d3.interval https://github.com/d3/d3-timer/issues/34 或使用页面可见性 API Drawing a SVG with d3.js while tab is in background。但我猜这些东西是 dc.js 内部的，因为它直接与 d3 交互以呈现更新。

这是我定义图表的方式。

export const chartFunc = (divRef,ndx,color) => {
  const dimension = ndx.dimension(d => d.category);
  const group = dimension.group().reduceSum(d => d.amount);

  const chart = dc.rowChart(divRef);
  chart
    .height(310).width(300)
    .dimension(dimension)
    .group(group)
    .data(g => g.top(15))
    .colors(color)
    .elasticX(true)
    .x(scaleBand())
  return chart;
};

并且数据滴答通过websocket、saga、redux、组件的数据属性，然后更新的crossfilter上下文推送到子组件。在crossfilter发生更新后，我调用“redrawAll()”来刷新图表。

  const [ndx,updateNDX] = useState(null);
  const [hasNDX,updateHasNDX] = useState(false);

  useEffect(() => {
    if(initialLoad && !hasNDX) {
      updateNDX(crossfilter(data));
      updateHasNDX(true);
    } else {
      data.forEach(update => {
        ndx.remove(d => d._id === update._id);
        ndx.add([update]);
      });

      dc.redrawAll();
    }
  },[data]);

有人遇到过类似的问题或有什么建议可以解决这个问题吗？