web-dev-qa-db-ja.com

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

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

これは私がsvgname__を作成したJavaScript関数からの抜粋です：

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

古いsvgname__要素を削除する、または少なくともその内容を置き換えるにはどうすればよいですか？

javascriptajaxsvgd3.js
184
Sami

これが解決策です。

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

これはD3.jsによって提供されるremove関数です。

256
Sami

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

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

sVGに関連するすべてのコンテンツを削除します。

注：チャートを更新したい場合にお勧めです。

133
burce

Svg要素を追加するときにid属性を設定すると、d3がこの要素に対して後でidを選択するように選択させることもできます。

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

...

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

私は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ではテストされていません。

28
Stirling

あなたのsvgを含むdivの内容を削除するのにjQueryを使うこともできます。

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

私はD3.jsを使ってSVGを使っています、そして私は同じ問題を抱えていました。

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

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

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

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

ここで私はSVGの中の前のgとパスを削除して、新しいものと取り替えています。

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

6
Shailender Singh

Xhtmlを使用している場合はD3が要素を正しい '名前空間'で作成するように、append("svg:svg")ではなくappend("svg")を使用する必要があります。

4
Sprintstar