D3.js D3js性能问题

我正在编写一个流程管理器，它将显示同时运行的多个流程的状态。 我正在使用d3js绘制条形图，因此它将如下所示：

目前，我已创建此网站： 这种行为就像我需要的（在添加缩放并使其看起来更好之前）。 如您所见，我有两项服务：

获取生成的当前状态（这是在开始时绘制所有条形图）

仅获取活动服务（当获取此服务时，我将所有的条加在一起）

问题是，当我看chrome的cpu使用率时，有时会超过20%。 我之所以这样是因为我使用了d3js。当我使用这个示例bl.ocks.org/mbostock/1021841时，只需单击屏幕，我就可以获得超过20%的CPU

我在代码中所做的是每隔几秒钟，我就在屏幕上的每个矩形上添加更多的像素，所有的东西都是动态的，我不是一次画所有的东西。 完成一个矩形后，我将它替换为同一行中的下一个矩形（我有一个包含所有行的数组）。 所有代码都在一个循环中，直到流程完成。 我的javascript代码：www.webmarkgroup.com/projects/overflow/includes/js/buildManager.js 您可以在JS文件的“setbar”函数中看到主代码 我想不出如何使用transition，也许它会更快，或者每次都从DB加载所有的rect。你觉得呢

---

谢谢

请查看chrome控制台中的“性能”选项卡，并在代码执行时进行一些录制。这将让您确切地了解占用cpu周期的内容。我怀疑您可能会遇到布局混乱问题。请看一下使用这样的包将有助于缓解一些问题您可能正在体验。

示例：My JS file:D3本身并不是cpu密集型的，但您可以使用它执行的许多操作都是cpu密集型的。任何时候您制作动画时，它都会给cpu带来负担，即使您只是使用CSS转换。如果您对每个动画帧进行复杂的计算（就像你链接到的force layout示例中一样）使用率会更高。但是，你肯定可以优化你的代码；它目前会产生很多错误，一方面（宽度/高度为负的矩形）。另一方面，你可以使用d3转换来增加条带，而不是自己使用setTimeout。