如何删除或替换SVG内容?

2020/10/16 10:41 · javascript ·  · 0评论

我有一段JavaScript代码,该代码创建(使用D3.js)svg包含图表元素。我想基于来自使用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();

我有两个图表。

<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,但IE中没有SVG内部的线性渐变

$(“#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 append("svg:svg")则应使用,而不是append("svg")D3使元素具有正确的“命名空间”。

本文地址:http://javascript.askforanswer.com/ruheshanchuhuotihuansvgneirong.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!