在 d3 中通过退出转换保持元素顺序 (selection.order)

我将切入正题fiddle: http://jsfiddle.net/K6Yrw/ http://jsfiddle.net/K6Yrw/【点击第二个按钮快速查看效果】

我在用着selection.order因为我需要 DOM 元素以与数据元素相同的顺序存在。

我想添加一个过渡到我的.exit()选择。然而，当与.order()，该过程崩溃。被删除的项目被放置在 DOM 元素列表的开头。

我的猜测：也许是因为order尝试获取数据数组中元素的索引 - 当然它不再存在，所以得到-1作为索引，这意味着它应该被排序到 DOM 元素列表的开头。

如果我不使用order那么退出转换就可以正常工作：但是如果我在数据数组中插入一些东西，当然新的 DOM 元素只会附加到末尾。

非常感谢任何提示或帮助！

我相信我有解决办法。问题是 d3 最终排序的不仅仅是您选择的元素。退出的元素不再是您选择的一部分，并且 d3 无意中移动了它们。我修改了现有的 d3 order 函数，使其采用关键函数并跳过当前选择中未包含的任何内容。这样退出的元素就保持原样。我的版本需要一个键来检查某个元素是否在当前选择中。不确定是否有更好的方法来处理这个问题。

function strictOrder(fnKey){
    fnKey = fnKey || function(d){return d;};

    return function(){
        for (var j = -1, m = this.length; ++j < m; ) {

            for (var group = this[j], i = group.length - 1, next = group[i], node,seen = new d3.set(); --i >= 0; ) {
                node = group[i];
                if (!node)  continue;

                if (next && next !== node.nextSibling && (!node.nextSibling || seen.has(fnKey(node.nextSibling.__data__)))){
                    next.parentNode.insertBefore(node, next);
                }

                seen.add(fnKey(node.__data__));
                next = node;
            }
        }
        return this;
    };
}

在这里查看你的分叉小提琴：http://jsfiddle.net/co8nqopy/1/ http://jsfiddle.net/co8nqopy/1/