1

コードに次の呼び出しがあると想像してください。

svg.selectAll("path")
    .data(data, key)
    .enter().append("path")
    .attr("d", path);

コードの後半で、まったく同じ呼び出しが行われ、dataいくつかの新しいエントリのみが含まれます。既存のパスを再描画せずに、新しいデータエントリを新しいパスにバインドするにはどうすればよいですか？（つまり、既存のパスに関連付けられているデータ要素は変更されません）

これはパフォーマンスの最適化ですdata。10,000以上のエントリが含まれ、呼び出しごとに1％未満のエントリが追加または削除されます。ご想像のとおり、10,000以上のパスを描画すると、リソースを大量に消費し、実行に数秒かかります（その間、ページ全体がユーザーイベントに応答しなくなります）。

1つの解決策は、古いデータと新しいデータの違いの配列を作成enter()し、新しいデータ要素でのみ使用することです。ただし、2番目のデータセットが提供されるときにスコープに古いdata変数を含めるのは注意が必要です。D3はどういうわけか内部的に古いデータの表現を維持する必要があり、確かにそれを使用できると思います。

同様に、削除されたデータ要素に対しても同じプロセスが発生する必要があります（すべての呼び出しでいくつかの要素が削除されdata、対応するパスは他のすべてのパスに触れることなくDOMから削除される必要があります）。しかし、最初の部分の解決策があれば、この部分を理解できると思います。

4

1 に答える 1

1

オブジェクトの恒常性とd3での結合について読むことをお勧めします。

引用したenter()関数は新しいデータだけでなく、基本的にを使用して新しいデータの配列を指定できますselection.data(newDataArray, function(d){return d.id})。次に、selection.enter()すべての新しい要素、selection.exit()すべての削除された要素、およびselection新しいデータセット（old + new）のすべての要素を取得します。 ）。

これも素敵な短いチュートリアルです。

また、d3.jsのデータに関するリファレンスドキュメントもご覧ください。

于 2013-03-25T22:36:21.260 に答える