DOM节点清理在d3中如何工作？

我正在使用D3在骨干视图中进行图形visuzalization。我允许用户捏合缩放图形，使用webkit转换平滑过渡，并在发布时重新绘制。为了简化代码，我只是重新绘制新图，而不是重新计算元素的新位置和大小（这是我的原始方法，但我的团队请求重绘路线）。DOM节点清理在d3中如何工作？

[我通过twitter与Bostock交谈。这实际上并不是首选的方式]

我注意到的事情是，对于每次重绘，我都会倾倒大量未清理的dom节点。

这与事件处理程序/闭包中的循环引用无关，因为我禁用了除标签之外的所有标签（这些标签没有附加处理程序），并且发生相同的行为。

我已经试图积极地从图中删除元素，但dom节点似乎仍然泄漏。

下面是一些相关的代码。 'render'被称为一组新的标签。在完成变焦，“关闭”叫上老图，一个新的与另一种观点认为实例创建，并调用“渲染”：

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在幕后做一些事情来优化未来的图形构建/更新？有没有更好的方法来销毁我不知道的图形？

任何想法？

来源

2012-06-18 Gopherkhan

D3不保留任何隐藏的引用到您的节点，所以没有“DOM节点清理”的内部概念。有简单的选择，这是DOM元素的数组，和DOM本身。如果您从DOM中移除了一个元素，并且没有任何附加的引用，它应该被垃圾回收器回收。（另外：目前还不清楚你所指的漏洞是DOM中剩余的元素，还是垃圾收集器没有回收孤立元素。过去，一些旧浏览器有垃圾收集DOM之间的循环引用元素和JavaScript关闭，但我不知道任何影响现代浏览器的问题。）

如果您正在更新DOM，执行此操作的最高性能方式是（通常）使用数据连接，因为这允许您重用现有元素并仅修改需要更改的属性。使用数据连接的关键功能对于object constancy也是一个好主意;如果在更新之前和之后都显示相同的数据，那么您可能不需要重新计算其所有属性，并且浏览器的更新工作量较少。

在某些情况下，可以选择更快的任意更新，例如更新封闭G元素的transform属性，而不是更新后代元素的位置。作为另一个例子，你可以简单地通过改变viewBox属性来在SVG元素中进行几何缩放。但几何缩放是一个非常有限的情况;一般而言，最有效的更新取决于正在发生的变化。使用数据连接，以便最大限度地减少您附加或删除的元素数量，并最大限度地减少需要重新计算的属性数量。

几个其他的事情，我会指出...

你可以使用一个数据连接，同时创建多个蜱，而不是使用一个for循环。 For循环几乎从未用于D3，因为数据连接可以创建多个元素（和分层结构）而不需要循环。更好的是，使用时间格式（d3.time.format）的轴组件（d3.svg.axis）和时标（d3.time.scale）。
D3的最新版本不需要“SVG：”命名空间，所以你可以附加“文”，“行”等
我想不出任何情况下selectAll("*").remove()品牌感。 “*”选择符匹配所有后代，所以这将从其父代中删除每一个后代。您应该始终尝试删除最上面的元素（此处为SVG容器），而不是删除子元素的多余部分。

来源

2012-06-21 23:01:22 mbostock

谢谢。我会研究不同的缩放选项，但之前我没有使用它们的原因是我的图形以矩形内的常量字体大小的文本为特征，并且我需要确定放大/缩小时所需的任何截断。但是，再次感谢所有帮助:) – Gopherkhan

是的，有几个原因，为什么几何变焦不足。有时你可以通过减小字体大小来增加缩放级别来修补这些问题，但通常以编程方式重新定位元素更为简单。 – mbostock

我知道这是一个老问题，但在这里查看一些关于DOM节点清理的特定于IE的注意事项：http://stackoverflow.com/questions/18575452/why-do-my-svg-nodes-leak-memory-in - 即 – explunit

DOM节点清理在d3中如何工作？

回答

相关问题