0

我正在基于以下格式的数组在Angular模板中生成 SVG 图：

[{x: 0, y: 1}, {x: 1, y: 2}, ...]-- 该数组将包含数千个点。

虽然我可以快速渲染<path>具有数千个点的元素，但当我使用为每个点ng-repeat创建一个元素时会出现不可接受的性能。<circle>

为了确保性能不是由于 SVG 性能，我复制了 Angular 生成的 SVG 输出并创建了一个静态 .html 文件，其中包含大约 5 个包含大约 10,000 个<circle>元素的图形。静态文件几乎立即呈现。我还确认这不是我用于生成和缩放点的样板代码，因为没有<circle>元素（只有 2 个<path>元素）的性能非常出色。

我已将其缩小到DOM 注入机制或为每个元素创建一个具有自己的脏检查观察者的子范围ng-repeat的事实。ng-repeat根据一些详尽的研究，它似乎更有可能是后者。

这是生成图表的模板：

<svg width="1020" height="220">
    <g class="series" transform="translate(10,10)">
        <path class="series-fill" d="{{ series.path('fill') }}" stroke="none" fill="#ddd"></path>
        <path class="series-path" d="{{ series.path('line') }}" stroke="#999" stroke-width="1" fill="none"></path>
        <g class="series-points" stroke-width="1" stroke="#fff">
            <circle ng-repeat="point in points" class="series-point" r="2" cx="{{ point.scaledX }}" cy="{{ point.scaledY }}"></circle>                                                                                           
        </g>

    </g>
</svg>

TL;DR，什么是最 Angular 或最推荐的使用ng-repeat类似行为的方式，无需对每个元素进行脏检查，也无需使用观察者创建新的子作用域。显然分页/无限滚动不适用于此处。

4

0 回答 0