不更新 .each 函数中的 D3.js 元素
doesn't update d3.js elements in .each function
我的代码可以工作,它向我显示了数据的元素,但是在更改数据并再次运行相同的代码后,d3 不会更新我的 SVG 元素的文本。我必须刷新整个网站才能更改。
var blackbox= d3.select("#content")
.selectAll(".silencer")
.data([0]);
blackbox.enter()
.append("div")
.attr("class", "silencer")
.attr("id", "silencer");
blackbox.exit().remove();
var box = blackbox.selectAll(".ursa")
.data(fraung);
box.enter()
.append("div")
.attr("class", "ursa")
.each(function(d) {
d3.select(this)
.append("svg")
.attr("class", "invoker")
.each(function(d) {
d3.select(this).append("svg:image")
.attr("xlink:href", "images/qwer.png")
.attr("x", "0")
.attr("y", "0")
.attr("width", "100")
.attr("height", "100")
.append("title")
.text(function(d) {return (d.name)});
});
d3.select(this).append("div")
.attr("class", "chen")
.each(function(d) {
d3.select(this).append("table")
.attr("class", "tab")
.each(function(d) {
d3.select(this).append("tbody")
.each(function(d) {
d3.select(this).append("tr")
.text(function(d) {return("Name: ")})
.attr("class", "key")
.each(function(d) {
d3.select(this).append("td")
.text(function(d) {return (d.name)});
});
});
});
});
});
box.exit().remove();
听起来在加载第二个数据集之前,您的 SVG 元素没有被清除,因此第二个数据集被绘制在第一个数据集后面。如果唯一改变的是文本,那么看起来什么都没有发生。浏览器刷新将清除任何动态绘制的内容。在调用"黑盒"之前,您可以执行类似操作来清除"#content"元素中的所有内容,我假设该元素是您的SVG容器。
if(!d3.select("#content").empty()) d3.select("#content").remove();
这将完全删除 SVG 容器。因此,您必须先再次创建它,然后才能加载新数据。或者,如果您只想从 SVG 容器中删除子元素,则可以执行以下操作:
if(!d3.select("#content").selectAll("*").empty()) d3.select("#content").selectAll("*").remove();
相关文章:
- 如何在d3.js中返回路径的y坐标
- 有条件更新d3.js力图中节点的最佳方法
- 使用D3.js计算带有字母间距的文本长度
- D3.js模式不适用于弧形或圆环图
- d3.js Chord图的动态工具提示
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- HTML5FileReader输出到D3.js图表
- D3.js生成有效的SVG,但不显示任何内容
- d3.js:限制画笔的大小
- d3.js用按钮更新条形图工具提示
- 如何为d3.js图表输出组织/嵌套数据
- d3-js快速事件调用问题
- D3.JS向rect添加缩放和列表项
- d3.js圆的半径是否可以由样式属性指定
- 如何在d3.js中自定义事件侦听器
- 在新窗口上使用d3.js
- 如何用d3.js绘制折线图
- 使用dc.js、d3.js和crossfilter引用错误
- D3.js剪辑路径截断了我的图的边缘
- D3.js和坐标系