13

我正在主干视图中使用 D3 进行图形可视化。我允许用户捏缩放图形，使用 webkit 转换平滑过渡，并在发布时重绘。为了保持代码简单，我只是以新的比例重绘图表，而不是重新计算元素的新位置和大小（这是我最初的方法，但我的团队要求重绘路线）。

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

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

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

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

这是一些相关的代码。为一组新标签调用“渲染”。完成缩放后，在旧图形上调用“关闭”，并使用另一个视图实例化创建一个新图形并调用“渲染”：

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

有任何想法吗？

4

1 回答 1

21

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

（此外：尚不清楚您所指的泄漏是留在 DOM 中的元素还是垃圾收集器未回收的孤立元素。过去，一些较旧的浏览器存在错误，即垃圾收集 DOM 元素和 JavaScript 闭包之间的循环引用，但我不知道有任何影响现代浏览器的此类问题。）

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

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

我还要指出其他几件事……</p>

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

  • 最新版本的 D3 不需要“svg:”命名空间，因此您可以附加“text”、“line”等。

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

于 2012-06-21T23:01:22.450 回答