2

我正在使用 D3.js 根据从 Firefox 中的 AJAX 调用检索到的数据动态更新 HTML 表。在之前有数据之后，我的数组实际上可能为空（因此，首先使用 array = [ {...}, {...}, {...}, ... ] 调用此代码，然后用数组 = [] 调用，我使用 Firebug 验证变量数组实际上确实具有这些值）。当它第二次被调用时，我希望空数组会导致代码删除表中当前的所有行，但这不会发生。相反，旧数据仍显示在表中。有人可以解释为什么这段代码不正确（或者至少是做我想做的正确方法）？

var rows = d3.select(TABLE_BODY_ID)
    .selectAll("tr")
    .data(array, function(d) {
        return d.id;
    });
rows.enter()
    .append("tr")
    .selectAll("td")
    .data(function() { ... })
    .enter()
    .append("td")
    .each(function(d, i)
    {
        if(3 === i)
        {
            var img = d3.select(this)
                .append("img");
            img.attr("src", d)
                .attr("width", 20)
                .attr("height", 20);
        }
        else d3.select(this).text(function(d) { return d; });
    });
rows.exit().remove();

我在其他表上使用与此基本相同的代码，并且它没有问题，所以我不知道为什么它不适用于这个表。

谢谢！

编辑以获取更多信息：

在又摸索了一些之后，我发现代码确实有效。行仍然出现在表中的原因显然是由于它后面的行：

$(TABLE_ID).trigger("sorton", [[[1, 1],[2, 1]]]);

显然，tablesorter 插件不能很好地与 D3.js 配合使用。我仍然不确定如何解决这个问题，但我有一些想法。

4

0 回答 0