Question

我在Safari中使用dom排序时遇到了一些麻烦，它基本上不会移动dom项目。订购适用于Chrome和Firefox，我唯一的问题是在Safari上。这是我正在使用的代码：

var hovered = d3.select(this)[0][0]['__data__']['properties']['name'];
g.selectAll("path").sort(function(a, b) {
  return (a.properties.name == hovered ? 1 : 0);;
});

我正在使用它，因为稍后在代码中我正在对悬停路径进行一些缩放，如果它不是在dom树中的最后一个，它会出现在它之后的路径后面。

任何有关此事的帮助都会很棒。

Answer 1

问题是您没有为Array.sort实施有效的比较器。如果 a 应该在 b 之前，比较器需要返回小于零的数字，如果 a 应该在之后，则大于零的数字> b ，如果您不关心 a 和 b 的相对顺序，则为零。

如果你想将悬停的名字移到前面，你需要这样的东西：

function order(a, b) {
  return (a.properties.name == hovered) - (b.properties.name == hovered);
}

在Safari和Firefox中进行排序的原因是他们使用stable sorting algorithms，在比较器返回0时保留顺序。但是，ECMAScript标准不保证这种行为，所以你应该实现一个合适的比较器而不是依赖于这种特定于浏览器的行为。（如果你真的需要稳定的排序，你可以将它构建到比较器中，但是你需要缓存之前的顺序。）

所有这一切，在悬停时将特定节点移动到前面的速度更快，而不是对所有元素进行排序：

path.on("mouseover", function() {
  this.parentNode.appendChild(this);
});

如果您发现自己经常这样做，甚至可以定义moveToFront方法。

d3v2 - Dom排序在Safari中不起作用

1 个答案: