[英]Removing svg text elements with d3.js
I can change the value of the text with a smooth little tween, but every time I am emptying one svg and creating a new one. 我可以使用平滑的小补间来更改文本的值,但每次我清空一个svg并创建一个新的svg。 This eventually loads the DOM up with empty SVGs.
这最终会使用空SVG加载DOM。 How can I get rid of them?
我怎么能摆脱他们?
D3: D3:
var vis = d3.select("#visualisation"),
commasFormatter = '$' + d3.format(",.0f"),
numVis = d3.select("#defecit"),
defTotal = d3.select("#defense");
function init () {
//Initialize mean text
numVis.append("text")
.attr("id", "meantext")
.attr("y", 40)
.attr("x", 118)
.style("font-size", "26px")
.style("font-family","Arial, Helvetica, sans-serif")
.style('font-weight', 'bold')
.style('text-color', '#525252');
defTotal.append("text")
.attr("id", "defense")
.attr("y", 0)
.attr("x", 0)
.style("font-size", "16px")
.style("font-family","Arial, Helvetica, sans-serif")
.style('font-weight', 'bold')
.style('text-color', '#525252');
d3.select("#meantext")
.transition()
.duration(500)
.ease('linear')
.tween("text", function() {
var i = d3.interpolate(this.textContent, dollars.value);
return function(t) {
this.textContent = '$' + d3.format(",")(Math.round(i(t)));
};
})
//Doing something like this didn't work - kept giving me an error that the object array had no exit function
d3.select("meantext").exit().remove()
}
You can remove a specific element, do d3.select("#idOfElement").remove()
. 你可以删除一个特定的元素,做
d3.select("#idOfElement").remove()
。 There's no need for .exit()
here as no data is being matched and bound. 这里不需要
.exit()
,因为没有数据匹配和绑定。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.