220

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

これが私が作成したJavaScript関数からのスニペットですsvg：

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

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

4

8 に答える 8

307

解決策は次のとおりです。

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

これはremoveD3.jsが提供する機能です。

于 2012-06-06T09:30:10.150 に答える
168

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

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

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

于 2014-06-16T18:43:15.757 に答える
64

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();
于 2014-03-31T12:40:30.933 に答える
33

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

于 2014-05-05T22:44:17.173 に答える
8

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

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

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

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

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

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

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

于 2014-03-27T08:29:09.523 に答える
5

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

$("#container_div_id").html("");
于 2013-12-30T18:52:12.847 に答える
4

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

于 2012-07-23T08:11:36.523 に答える
2

https://www.d3-graph-gallery.com/graph/line_basic.htmlのコードに従い、次のコードを使用しました。

svg.append("path")
  .datum(filteredData)
  .attr("fill", "none")
  .attr("stroke", "blue")
  .attr("stroke-width", 1.5)
  .attr("d", d3.line()
    .x(function(k) { return x(k.date) })
    .y(function(k) { return y(k.value) })
   )

だから私にとっては、新しいラインが生成される直前にこれを叩くことがわかりました：

d3.selectAll("path").remove()
于 2021-07-30T10:41:48.470 に答える