DOM节点清理如何在d3中运行？

Question

我正在骨干视图中使用D3进行图形视觉化.我允许用户捏缩放图形,使用webkit转换平滑过渡,并在发布时重新绘制.为了保持代码简单,我只是以新的比例重新绘制图形,而不是重新计算元素的新位置和大小(这是我原来的方法,但我的团队请求重绘路径).

[我通过推特与博斯托克交谈过.这实际上不是首选的做事方式]

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

这与事件处理程序/闭包中的循环引用无关,因为我已禁用除标签之外的所有标签(这些标签没有附加处理程序),并且会发生相同的行为.

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

这是一些相关的代码.为一组新标签调用'render'.完成缩放后,在旧图上调用"close",并使用另一个视图实例创建一个新的并调用"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在幕后做一些事情来优化未来的图形构建/更新？有没有更好的方法来摧毁我不知道的图形？

有任何想法吗？

Answer 1

D3不保留对节点的任何隐藏引用,因此没有"DOM节点清理"的内部概念.有简单的选择,它们是DOM元素的数组,以及DOM本身.如果从DOM中删除一个元素,并且没有对它进行任何其他引用,则应该由垃圾收集器回收它.

(旁白:目前尚不清楚你所指的泄漏是DOM中剩余的元素还是垃圾收集器无法回收的孤立元素.过去,一些旧的浏览器有垃圾收集垃圾 - 收集DOM元素和JavaScript闭包之间的循环引用,但我不知道任何影响现代浏览器的问题.)

如果要更新DOM,那么执行此操作的最高效方法是(通常)使用数据连接,因为这允许您重用现有元素并仅修改需要更改的属性.对数据连接使用关键函数也是对象恒定性的一个好主意; 如果在更新之前和之后都显示相同的数据,那么您可能不需要重新计算其所有属性,并且浏览器执行的更新工作较少.

在某些情况下,可以选择更快的任意更新,例如更新封闭G元素的transform属性,而不是更新后代元素的位置.另外一个例子,您只需更改viewBox属性即可在SVG元素中进行几何缩放.但几何缩放是一个非常有限的情况; 一般来说,最有效的更新取决于具体的变化.使用数据连接,以便最大限度地减少要追加或删除的元素数量,并最大限度地减少重新计算所需的属性数量.

我要指出的其他几件事......

• 您可以使用数据连接同时创建多个刻度,而不是使用for循环.For循环几乎从不与D3一起使用,因为数据连接可以创建多个元素(和层次结构)而没有循环.更好的是,使用轴组件(d3.svg.axis)和时间刻度(d3.time.scale)和时间格式(d3.time.format).

• 最新版本的D3不需要"svg:"命名空间,因此您可以附加"text","line"等.

• 我想不出任何selectAll("*").remove()有意义的情况."*"选择器匹配所有后代,因此这将从其父级中删除每个后代.您应该始终尝试删除最顶层的元素 - 此处为SVG容器 - 而不是删除子元素的多余删除.