svg - D3.js で任意のデータをオブジェクトにアタッチする

Question

これは主に、D3.js での「ベスト プラクティス」とは何かに関連しています。ページ上にあるさまざまな svg 要素を作成した後、それらに任意の情報を添付したいと考えています。D3 では、一般的にデータセットから svg 要素を生成するようです。HTML 属性を追加せずに、いつでもこれらの svg 要素にデータを添付したいと考えています。

これを行う良い方法はありますか？補助配列/オブジェクトを使用する必要がありますか、または要素自体にデータを適用する方法はありますか?

Answer 1

任意のデータを添付する場合は、 datum メソッドを使用します。

D3.select('#mynodeId').datum( mydata );

その後、再度値にアクセスできます。

var mydata = D3.select('#mynodeId').datum();

内部的には、ノードが, ,シーケンスを介してデータセットから作成されたときと同様に、D3 は__data__ノードのプロパティを使用します。selectAllenterappend

DOM ノードへの参照が既にある場合は、D3.selectセレクター構文に基づいて再検索するのではなく、パラメーターとして渡すことができることに注意してください。

D3.select( anExistingDOMNodeReference ).datum( mydata );

APIドキュメントから：

d3.select(node):指定されたノードを選択します。これは、イベント リスナー内の d3.select(this) などのノードへの参照、または document.body などのグローバルへの参照が既にある場合に便利です。