blocks|key|560564|text|以下是解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|560565|d3.select("svg").remove();|code-block|syntax|javascript|560566|这是D3.js提供的remove函数。|offset|length|style|CODE|560567|entityMap^0|0|0|A|6|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Here is the solution:

<pre><code>d3.select("svg").remove();
</code></pre>

This is a <code>remove</code> function provided by D3.js.

blocks|key|560927|text|如果你想摆脱所有的孩子，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|560928|svg.selectAll("*").remove();|code-block|syntax|javascript|560929|将删除与svg关联的所有内容。|560930|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you want to get rid of all children,
<pre><code>svg.selectAll(&quot;*&quot;).remove();
</code></pre>
will remove all content associated with the svg.

blocks|key|344918|text|在附加svg元素时设置id属性还可以让d3稍后通过id在此元素上选择so+remove()：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|344919|var+svg+=+d3.select("theParentElement").append("svg")
.attr("id","the_SVG_ID")
.attr("width",...

...

d3.select("#the_SVG_ID").remove();|code-block|syntax|javascript|344920|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Setting the id attribute when appending the svg element can also let d3 select so remove() later on this element by id :

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

...

d3.select("#the_SVG_ID").remove();
</code></pre>

blocks|key|344964|text|我有两张图表。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|344965|<div+id="barChart"></div>
<div+id="bubbleChart"></div>|code-block|syntax|javascript|344966|这将删除所有图表。|344967|d3.select("svg").remove();+|344968|这可以删除现有的条形图，但之后我无法重新添加条形图|344969|d3.select("#barChart").remove();|344970|我试过了。它不仅可以让我删除现有的条形图，还可以让我重新添加一个新的条形图。|344971|d3.select("#barChart").select("svg").remove();

var+svg+=+d3.select('#barChart')
+++++++.append('svg')
+++++++.attr('width',+width+%2B+margins.left+%2B+margins.right)
+++++++.attr('height',+height+%2B+margins.top+%2B+margins.bottom)
+++++++.append('g')
+++++++.attr('transform',+'translate('+%2B+margins.left+%2B+','+%2B+margins.top+%2B+')');|344972|不确定这是否是正确的删除方法，请在d3中重新添加图表。它可以在Chrome上运行，但还没有在IE上测试过。|344973|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

I had two charts.

<pre><code>&lt;div id="barChart"&gt;&lt;/div&gt;
&lt;div id="bubbleChart"&gt;&lt;/div&gt;
</code></pre>

This removed all charts. 

<pre><code>d3.select("svg").remove(); 
</code></pre>

This worked for removing the existing bar chart, but then I couldn't re-add the bar chart after

<pre><code>d3.select("#barChart").remove();
</code></pre>

Tried this. It not only let me remove the existing bar chart, but also let me re-add a new bar chart.

<pre><code>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 + ')');
</code></pre>

Not sure if this is the correct way to remove, and re-add a chart in d3. It worked in Chrome, but have not tested in IE.

blocks|key|560749|text|我使用的是D3.js的SVG，我也遇到了同样的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|560750|我使用此代码删除了之前的svg，但IE中没有SVG中的线性渐变|560751|$("#container_div_id").html("")；|560752|然后我写了下面的代码来解决这个问题|560753|$('container_div_id+g').remove();
$('#container_div_id+path').remove();|code-block|syntax|javascript|560754|这里我删除了SVG中以前的g和path，代之以新的g和path。|560755|在静态内容中保持SVG标记内部的线性渐变，然后调用上面的代码，这在IE中有效|560756|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

I am using the SVG using D3.js and i had the same issue.

I used this code for removing the previous svg but the linear gradient inside SVG were not coming in IE

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

then I wrote the below code to resolve the issue

<pre><code>$('container_div_id g').remove();
$('#container_div_id path').remove();
</code></pre>

here i am removing the previous g and path inside the SVG, replacing with the new one.

Keeping my linear gradient inside SVG tags in the static content and then I called the above code, This works in IE

blocks|key|560670|text|您也可以只使用jQuery删除包含svg的div中的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|560671|$("#container_div_id").html("");|code-block|syntax|javascript|560672|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You could also just use jQuery to remove the contents of the div that contains your svg.

<pre><code>$("#container_div_id").html("");
</code></pre>

blocks|key|560630|text|您应该使用append("svg:svg")，而不是append("svg")，这样如果您使用的是xhtml，那么D3将使用正确的“名称空间”生成元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|560631|entityMap^0|5|H|Q|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

You should use <code>append("svg:svg")</code>, not <code>append("svg")</code> so that D3 makes the element with the correct 'namespace' if you're using xhtml.

blocks|key|345051|text|我遵循了https://www.d3-graph-gallery.com/graph/line_basic.html中的代码，并编写了以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|345052|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)+})
+++)++|code-block|syntax|javascript|345053|所以对我来说，事实证明我是在新产品线生成之前打这个耳光的：|345054|d3.selectAll("path").remove()|345055|entityMap|0|LINK|mutability|MUTABLE|url|https://www.d3-graph-gallery.com/graph/line_basic.html^0|4|1I|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

I follow the code from <a href="https://www.d3-graph-gallery.com/graph/line_basic.html" rel="nofollow noreferrer">https://www.d3-graph-gallery.com/graph/line_basic.html</a> and had this code:
<pre><code>svg.append(&quot;path&quot;)
 .datum(filteredData)
 .attr(&quot;fill&quot;, &quot;none&quot;)
 .attr(&quot;stroke&quot;, &quot;blue&quot;)
 .attr(&quot;stroke-width&quot;, 1.5)
 .attr(&quot;d&quot;, d3.line()
 .x(function(k) { return x(k.date) })
 .y(function(k) { return y(k.value) })
 ) 
</code></pre>
So for me it turned out to be that I slap this right before the generation of new line:
<pre><code>d3.selectAll(&quot;path&quot;).remove()
</code></pre>

I have a piece of JavaScript code which creates (using D3.js) an <code>svg</code> element which contains a chart. I want to update the chart based on new data coming from a web service using AJAX, the problem is that each time I click on the update button, it generates a new <code>svg</code>, so I want to remove the old one or update its content.

Here is a snippet from the JavaScript function where I create the <code>svg</code>:

<pre><code>var svg = d3.select("body")
 .append("svg")
 .attr("width", w)
 .attr("height", h);
</code></pre>

How can I remove the old <code>svg</code> element or at least replace its content?

How can I remove or replace SVG content?

jQuery

我有一段创建(使用D3.js)包含图表的svg元素的JavaScript代码。我希望使用AJAX基于来自web服务的新数据来更新图表，问题是每次单击更新按钮时，它都会生成一个新的svg，因此我希望删除旧的或更新其内容。下面是我在其中创建svg的JavaScript函数的一个片段var svg = d3.select("body")        .append("svg")        .att

问如何删除或替换SVG内容？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何删除或替换SVG内容？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何删除或替换SVG内容？
EN