5

StackOverflow のこのメソッドを使用して、D3.js で重複する SVG 要素を処理したいと思います。

thisただし、コードの性質上、要素を DOM に再度追加するのではなく、D3 セレクターを使用したいと考えています。私の質問は、関連するノードを取得するために D3 セレクターを使用するにはどうすればよいですか?

これは、元の例がそれを行う方法です。

this.parentNode.appendChild(this);

これは私の試みで、「Uncaught TypeError: Cannot call method 'appendChild' of undefined」で失敗します:

var thisNode = d3.select("#" + id);
thisNode.parentNode.appendChild(thisNode);

この JSFiddle (元の例から適応) は、問題を示しています: http://jsfiddle.net/cpcj5/

私の D3 の選択はthis、元の例とどのように異なりますか? 使用してみthisNode.node().parentNode.appendChild(thisNode)ましたが、それも失敗しました。

4

2 に答える 2

7

.parentNodeメソッドはd3 selectionではなく、DOM 要素用です。

d3 セレクションから DOM 要素にアクセスするのは少しトリッキーです。多くの場合、目的を達成するためのより良い方法があります。とにかく、単一の要素が選択されている場合、それは d3.selection の最初のアイテム内の最初で唯一のアイテムになります。つまり、次のようにアクセスする必要があります。

var someIdDOMelement = d3.select("#someid")[0][0];

これを使用したオリジナルの編集例: http://jsfiddle.net/cpcj5/1/

ID があり、具体的に DOM 要素を取得したい場合は、getElementByIdを使用します。

var someIdDOMElement = document.getElementById("someid")

on を使用してイベントをバインドするための d3 ドキュメントを見ると、バインドする関数内で、this変数がトリガーされたイベントの DOM 要素であることがわかります。したがって、d3 でイベント処理を処理する場合はthis、バインドされた関数内から DOM 要素を取得するために使用できます。

d3.selectしかし、あなたのコードを見ると、元のjavascriptメソッドを使用してノードを再追加し、次にバインドされたdom要素を使用してd3選択を作成するための元の実装に固執する方が簡単だと思いますthis. これが元のコードのやり方です: http://jsfiddle.net/cpcj5/3/

これが原因で問題が発生した場合は、コメントしてください。対処できるようにします。

于 2013-05-08T01:27:58.163 に答える