javascript - angular.js $apply 瓶颈

Question

我正在使用实时数据在网页上使用 SVG 绘制一些线条。为了管理数据，我使用 Angular.js 并管理可视化，我使用 D3.js。

我设置了一个 Angular Controller 来保存数据(行)。数据由一些点数组(带有 x/y 坐标的字典)组成。一些行在初始化时已知，其他行根据实时数据更新。

我设置了一个包含 SVG 元素的 Angular Directive(指令)('topView')。对于初始化时的每一行，我使用以下方法将其添加为路径:

var routeLeftLine = container.select("#routes").append("path");            
var routeLeftLineData = scope.val.route.left; // -> 1000+ points in there
routeLeftLine
            .attr("d", lineFunction(routeLeftLineData))
            .attr("stroke", "black")
            .attr("stroke-width", 1)
            .attr("fill", "none");

对于我想不断更新的每一行(1)，我都设置了一个 Angular Directive(指令)，例如:

<surface-cable val="data.cable"></surface-cable>

其中 data 是我在 Controller 上的数据对象，data.cable 是点数组。该指令如下所示:

OCMSWeb.directive('surfaceCable', function ( /* dependencies */ ) {
return {
    restrict: 'AE', 
    scope: { 
        val: '='
    },
    templateNamespace: 'svg',
    replace: true,
    template: '<g/>',
    link: function (scope, element, attrs) {
        var cableLine = d3.select(element[0]).append("path");

        scope.$watch('val', function () {
            var cableLineData = simplify(scope.val, 1, false); // size grows in time

            cableLine
                .attr("d", lineFunction(cableLineData))
                .attr("stroke", "rgb(240,144,32)")
                .attr("stroke-width", 1)
                .attr("fill", "none");
        }, true);
    }
};
});

当我使用计时器更新数据时，该结构工作正常，更改反射(reflect)在 SVG 中。

当我增加一行中的点数(> 1000 ... 我将来需要更多)时出现问题(不变的和更新的行都有这种效果)性能下降。线的更新变得非常慢，即使要重绘的元素还不包含很多元素。

我找不到原因。 SVG/d3/angular 是否再次渲染 svg 中的所有元素？
我绑定(bind)数据的方式是否效率低下？我应该一起跳过 d3 吗？

我已经尝试分析 javascript 性能，大约 80-90% 的 CPU 时间似乎花在调用 angular $apply(我认为，它扫描 DOM 以查找更改？)。如果一个元素(该行是一个 <path> 元素)有很多数据点，为什么 $apply 需要这么长时间？

Answer 1

在这种架构中，1000 行意味着 1000 条指令、1000 次观察和 1000 次值比较，无论这些值是否真的发生了变化。我怀疑这里的根本问题是您的 d3 代码，尽管不必要地重置笔划、笔划宽度和填充的属性肯定没有帮助。

一般来说，执行此操作的更好方法是使用一个指令，该指令采用一组线并处理 SVG 中所有电缆路径的布局。如果您正在查看数千条路径中的数十条，那么您可能希望查看在 Canvas 上而不是 SVG 上渲染它们。