次の形式の配列に基づいて、 Angularテンプレートで SVG グラフを生成しています。
[{x: 0, y: 1}, {x: 1, y: 2}, ...]-- 配列には数千のポイントが含まれます。
数千のポイントを持つ要素をすばやくレンダリングできますが、ポイントごとに要素を作成するため<path>に を使用すると、許容できないパフォーマンスが発生します。ng-repeat<circle>
パフォーマンスが SVG パフォーマンスによるものではないことを確認するために<circle>、angular で生成された SVG 出力をコピーし、約 10,000要素を含む約 5 つのグラフを含む静的 .html ファイルを作成しました。静的ファイルはほぼ瞬時にレンダリングされます。<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>
ng-repeatTL;DR、各要素の汚れたチェックやウォッチャーで新しい子スコープを作成せずに、-like 動作を使用する最も角度のある方法または推奨される方法は何ですか。明らかに、ページング/無限スクロールはここでは適用されません。