d3.js - d3 データ要素が id と一致することを確認しますか?

Question

たくさんのポリゴンを含む既存の svg があります。各ポリゴンには一意の ID があり、各 ID にはいくつかの関連データがあります。

私の質問はこれです: 自然な d3 結合を行う場合:

d3.selectAll("polygon").data(array_of_data)

ポリゴンに関連付けられたデータ要素が正しいことを保証する方法はありますか?

array_of_dataまたは、選択したポリゴンの順序と同じ順序を維持する必要がありますか?

Answer 1

D3 のdata()関数は、オプションの 2 番目の引数を取ります。これは、データム ノードと DOM ノードの間でまさにそのような対応を提供することを目的としています。これを試して：

d3.selectAll('polygon').data(array_of_data, function(d) { return d.id; });

の2 番目の引数data()はコールバック関数で、データを指定して呼び出されると、各 DOM ノードを対応するデータにバインドするキーを返します。このような関数を提供しない場合、D3 には、インデックスを使用してデータを DOM ノードにバインドする以外に選択肢がありません。