我正在主干 View 中使用 D3 进行图形可视化。我允许用户捏缩放图形,使用 webkit 转换平滑过渡,并在发布时重绘。为了保持代码简单,我只是以新的比例重新绘制图形,而不是重新计算元素的新位置和大小(这是我最初的方法,但我的团队要求重新绘制路线)。
[我通过推特与 Bostock 进行了交谈。这实际上不是首选的做事方式]
我注意到的是,对于每次重绘,我都会丢弃大量未清理的 dom 节点。
这与事件处理程序/闭包中的循环引用无关,因为我已经禁用了除我的标签之外的所有内容(这些标签没有附加处理程序),并且发生了相同的行为。
我已经尝试过积极地从图中删除元素,但 dom 节点似乎仍然存在泄漏。
这是一些相关的代码。 'render' 被称为一组新的标签。完成缩放后,在旧图形上调用“关闭”,并使用另一个 View 实例化创建一个新图形并调用“渲染”:
render: function() {
// create the svg offscreen/off dom
//document.createElementNS(d3.ns.prefix.svg, "svg")
var svg = this.svg = d3.select(this.el)
.append("svg:svg")
.attr('width', this.VIEW_WIDTH)
.attr('height', this.VIEW_HEIGHT)
this._drawTimeTicks.call(this, true);
return this;
},
_drawTimeTicks: function(includeLabels) {
var bounds = this.getDayBounds();
var min = bounds.start;
var date = new Date(min);
var hour = 1000 * 60 * 60;
var hourDiff = 60 * this.SCALE;
var graphX = (date.getTime() - min) / 1000 / 60;
var textMargin = 7;
var textVert = 11;
// Using for loop to draw multiple vertical lines
// and time labels.
var timeTicks = d3.select(this.el).select('svg');
var width = timeTicks.attr('width');
var height = timeTicks.attr('height');
for (graphX; graphX < width; graphX += hourDiff) {
timeTicks.append("svg:line")
.attr("x1", graphX)
.attr("y1", 0)
.attr("x2", graphX)
.attr("y2", height)
.classed('timeTick');
if (includeLabels) {
timeTicks.append("svg:text")
.classed("timeLabel", true)
.text(this.formatDate(date))
.attr("x", graphX + textMargin)
.attr("y", textVert);
}
date.setTime(date.getTime() + hour);
}
close: function() {
console.log("### closing the header");
this.svg.selectAll('*').remove();
this.svg.remove();
this.svg = null;
this.el.innerHTML = '';
this.unbind();
this.remove();
}
如您所见,我没有对事件处理程序或闭包做任何棘手的事情。通过一些缩放交互,我可以泄漏数十个 GC 永远不会回收的 dom 节点。
这是内存泄漏,还是 d3 在幕后做一些事情来优化 future 的图形构建/更新?有没有更好的方法来销毁我不知道的图表?
有什么想法吗?
最佳答案
D3 不会保留对节点的任何隐藏引用,因此没有“DOM 节点清理”的内部概念。有简单的选择,它们是 DOM 元素的数组,以及 DOM 本身。如果您从 DOM 中删除了一个元素,并且没有保留对它的任何其他引用,则它应该由垃圾收集器回收。
(旁白:不清楚您所指的泄漏是 DOM 中剩余的元素还是垃圾收集器未回收的孤立元素。过去,一些较旧的浏览器存在垃圾收集 DOM 元素之间循环引用的错误和 JavaScript 闭包,但我不知道有任何此类问题会影响现代浏览器。)
如果您要更新 DOM,执行此操作的最高效方法(通常)是使用数据连接,因为这允许您重用现有元素并仅修改需要更改的属性。使用键函数进行数据连接对于 object constancy 也是一个好主意。 ;如果在更新前后都显示相同的数据,那么您可能不需要重新计算它的所有属性,并且浏览器做的更新工作更少。
在某些情况下,有更快的任意更新的替代方法,例如更新封闭 G 元素的 transform 属性而不是更新后代元素的位置。再举一个例子,您只需更改 viewBox 属性即可在 SVG 元素内进行几何缩放。但是几何缩放是一种非常有限的情况;一般来说,最有效的更新取决于具体发生了什么变化。使用数据连接可以最大限度地减少添加或删除的元素数量,并最大限度地减少需要重新计算的属性数量。
我要指出的其他几件事......
您可以使用数据连接同时创建多个刻度,而不是使用 for 循环。 For 循环几乎从不与 D3 一起使用,因为数据连接可以在没有循环的情况下创建多个元素(和层次结构)。更好的是,使用轴组件 (d3.svg.axis) 和具有时间格式 (d3.time.format) 的时间刻度 (d3.time.scale)。
最新版本的 D3 不需要“svg:”命名空间,因此您可以附加“text”、“line”等。
我想不出任何
selectAll("*").remove()
有意义的情况。 “*”选择器匹配所有后代,因此这将从其父代中删除每个后代。您应该始终尝试删除最顶层的元素(此处为 SVG 容器),而不是多余地删除子元素。
关于javascript - DOM 节点清理在 d3 中如何工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11091865/