Question

查看我的电子表格：

http://bl.ocks.org/emeeks/11310634

点击排序＆＃39;按钮，它运行此功能：

function sortSheet() {
    var dataset = d3.selectAll("div.datarow").data();
    dataset.sort(function(a,b) {
        var aDate = new Date(a.timestamp);
        var bDate = new Date(b.timestamp);
        if (aDate > bDate)
            return 1;
        if (aDate < bDate)
            return -1;
        return 0;
    });
    d3.selectAll("div.datarow").data(dataset, function(d) {return d.content})
        .transition()
        .duration(2000)
        .style("top", function(d,i) {return (40 + (i * 40))});
}

所有这一切都是按日期对数组进行排序，并将其重新绑定到之前创建的电子表格行。然后它根据更新的阵列位置转换电子表格。

但是，如果你点击过渡＆＃39;按钮，它运行此功能：

function transitionSheet() {
    d3.selectAll("div.datarow")
        .transition()
        .duration(2000)
        .style("top", function(d,i) {return (40 + (i * 40)) + "px"});
}

并将行恢复到原始位置，这似乎表明i值未更改。所以，我很困惑。 i值如何更改以使行在第一个函数中移动，然后返回其初始值而不执行任何array.sort？我的假设是，因为它是选择顺序，因此受到DOM中顺序的影响，它会粘在＆＃34;粘＆＃34;但那么第一个功能如何正常工作？

Answer 1

非常有趣的问题。

简短回答

索引不会存储在任何地方。它的值（i）只是对代码中正在处理的数组结构的反映。

稍长一点的回答

来自selectAll()

的d3文档

 The elements will be selected in document traversal order (top-to-bottom).

这意味着函数 transitionSheet（）将始终恢复DOM树中的顺序。

但是，在 sortSheet（）中，选择后，将通过调用data（）执行数据重新绑定。这会导致更改数组中元素的顺序（但不会在DOM树中，这允许后续调用transitionSheet（）以及恢复原始顺序的效果）！

总之，您可以将索引i视为临时工件，与您在给定时间在代码中操作的数组相关，而不是数据的“属性”。

意外的数据绑定行为

1 个答案: