1

I'm having some trouble using the dom sorting in Safari, it basically does not move the dom items. The ordering works in Chrome and Firefox, my only issue is on Safari. This is the code i am using:

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

I am using this because later in the code i am doing some scaling on the hovered path, and if its not last in the dom tree it appears behind the paths that are after it.

Any help on the matter would be great.

4

1 回答 1

2

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

如果要将悬停的名称移到前面，则需要以下内容：

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

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

话虽如此，在悬停时将特定节点移动到前面会更快，而不是对所有元素进行排序：

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

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

于 2013-04-23T15:42:36.933 回答