SVGコンテンツを削除または置換するにはどうすればよいですか？

svgチャートを含む要素を（D3.jsを使用して）作成するJavaScriptコードがあります。AJAXを使用してWebサービスからの新しいデータに基づいてグラフを更新したいのですが、問題は、更新ボタンをクリックするたびに新しいが生成さsvgれるため、古いデータを削除するか、そのコンテンツを更新することです。

以下は、私が作成するJavaScript関数のスニペットsvgです。

var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

古いsvg要素を削除したり、少なくともそのコンテンツを置き換えるにはどうすればよいですか？

これが解決策です：

d3.select("svg").remove();

これは、removeD3.jsが提供する関数です。

すべての子供を取り除きたいなら、

svg.selectAll("*").remove();

svgに関連付けられているすべてのコンテンツが削除されます。

注：チャートを更新する場合に推奨されます。

svg要素を追加するときにid属性を設定すると、d3が選択できるようになるので、後でこの要素に対してidでremove（）を実行します。

var svg = d3.select("theParentElement").append("svg")
.attr("id","the_SVG_ID")
.attr("width",...

...

d3.select("#the_SVG_ID").remove();

2つのチャートがありました。

<div id="barChart"></div>
<div id="bubbleChart"></div>

これにより、すべてのグラフが削除されました。

d3.select("svg").remove(); 

これは既存の棒グラフを削除するのに役立ちましたが、その後棒グラフを再度追加することができませんでした

d3.select("#barChart").remove();

これを試しました。既存の棒グラフを削除できるだけでなく、新しい棒グラフを再度追加することもできます。

d3.select("#barChart").select("svg").remove();

var svg = d3.select('#barChart')
       .append('svg')
       .attr('width', width + margins.left + margins.right)
       .attr('height', height + margins.top + margins.bottom)
       .append('g')
       .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');

これが削除する正しい方法であるかどうかわからず、d3でグラフを再度追加します。Chromeでは動作しましたが、IEではテストされていません。

D3.jsを使用してSVGを使用していますが、同じ問題が発生しました。

以前のsvgを削除するためにこのコードを使用しましたが、SVG内の線形グラデーションはIEに含まれていませんでした

$（ "＃container_div_id"）。html（ ""）;

それから私は問題を解決するために以下のコードを書きました

$('container_div_id g').remove();
$('#container_div_id path').remove();

ここでは、SVG内の以前のgとパスを削除して、新しいものと置き換えています。

静的コンテンツのSVGタグ内に線形グラデーションを維持してから、上記のコードを呼び出しました。これはIEで機能します

jQueryを使用して、svgを含むdivのコンテンツを削除することもできます。

$("#container_div_id").html("");

xhtmlを使用している場合、D3が正しい「名前空間」で要素を作成するためでappend("svg:svg")はなくappend("svg")、を使用する必要があります。