javascript - 既存の D3 SVG チャートを DOM に戻す方法は?

Question

こんにちは、D3 SVG オブジェクトがあります。

 d3.select("#chart").append("svg")
.attr('id', 'chartId' + idx)

これに四角形を追加して棒グラフを作成します。

DOMから追加および削除できるようにしたいと思います。

次の方法で簡単に削除できます。

d3.select('svg#chartId' + j).remove();

削除したばかりの SVG チャート全体を再追加するにはどうすればよいですか?

Answer 1

D3 は、削除されたノードの再接続をサポートしていません。

selection.remove()ノードを完全に破壊するわけではありませんが、jQuery のdetach()メソッドと非常によく似た動作をします。(SVG 要素で jQuery を使用することは決してうまくいきません)

幸いなことに、これは組み込みの SVG DOM を使用すると非常に簡単です。

// .remove() returns the detached node.
var el = d3.select('.selection').remove();
var nativeEl = el[0][0];
nativeEl.parentNode.appendChild(nativeEl);

通常は、これらの要素を表示および非表示にする方がおそらく簡単ですが、レンダリング後に要素の順序を再配置するなどの場合、これは非常に便利です。

Answer 2

detach()の代わりに使用remove()

var refToElelment = $(d3.select('svg#chartId' + j)).detach();

また

$('#chartId' + j).detach()

後で..

$('#target').append(refToElelment);