これは主に、D3.js での「ベスト プラクティス」とは何かに関連しています。ページ上にあるさまざまな svg 要素を作成した後、それらに任意の情報を添付したいと考えています。D3 では、一般的にデータセットから svg 要素を生成するようです。HTML 属性を追加せずに、いつでもこれらの svg 要素にデータを添付したいと考えています。
これを行う良い方法はありますか?補助配列/オブジェクトを使用する必要がありますか、または要素自体にデータを適用する方法はありますか?
任意のデータを添付する場合は、 datum メソッドを使用します。
D3.select('#mynodeId').datum( mydata );
その後、再度値にアクセスできます。
var mydata = D3.select('#mynodeId').datum();
内部的には、ノードが, ,シーケンスを介してデータセットから作成されたときと同様に、D3 は__data__
ノードのプロパティを使用します。selectAll
enter
append
DOM ノードへの参照が既にある場合は、D3.select
セレクター構文に基づいて再検索するのではなく、パラメーターとして渡すことができることに注意してください。
D3.select( anExistingDOMNodeReference ).datum( mydata );
APIドキュメントから:
d3.select(node):指定されたノードを選択します。これは、イベント リスナー内の d3.select(this) などのノードへの参照、または document.body などのグローバルへの参照が既にある場合に便利です。