javascript - D3 排序函数总是传递未定义的参数

Question

使用 D3 2.4.2，我创建了许多路径元素，如下所示:

for (var i = 0; i < pathIndices.length; i++) {
  graph.append("svg:path")
    .style("stroke", colors[pathIndices[i]])
    .style("stroke-width", "2.5px")
    .style("fill", "none")
    .attr("class", PATH_CLASS)
    .attr("id", PATH_ID_PREFIX + pathIndices[i])
    .attr("d", lineFunc(data))[0];
}

它们都按预期绘制到屏幕上。稍后，当用户进行一些输入时，我想将其中一个放在最前面，所以我有一个事件处理程序可以执行此操作:

var pathToHighlight = selectPath(pathIndex);
var paths = d3.selectAll("." + PATH_CLASS);
paths.sort(
  function(a, b) {
    if (a === pathToHighlight) {
      return -1;
    }
    else if (b === pathToHighlight) {
      return 1;
    }
    else {
      return 0;
    }
  }
);

在Chrome中设置断点表示我这里的路径选择成功(paths是一个SVGPathElements数组)。但是代码什么也没做，在 sort 函数内部设置断点显示 a 和 b 始终未定义。进入 d3 代码，我看到当内部函数 d3_selection_sortComparator 使用适当的参数调用我的比较器时，除了它们与它们自己未定义的 __data__ 成员进行 AND 运算，这导致 undefined 被传入:

// a and b are correct, but a.__data__ and b.__data__ are undefined
return comparator(a && a.__data__, b && b.__data__);

我在这里做错了什么？我的路径正确地绘制到屏幕上，所以看起来它们应该有正确的数据。对吧？

编辑:图片:

Answer 1

您正在使用 selection.sort当这听起来像你期待的时候Array.sort . selection.sort 方法用于根据绑定(bind)到元素 a 和 b 的数据 对选择进行排序。如果您的元素没有绑定(bind)数据，那么这将不起作用。如果你想根据其他东西对选择进行排序(比如测试一个元素引用是否等于另一个元素引用)，你应该在调用 .sort() 之前从选择中获取元素数组，如下所示:

// `paths` is a Selection
var paths = d3.selectAll("." + PATH_CLASS);
// `pathElements` is an Array
var pathElements = paths[0];

pathElements.sort(function(a,b) {
  // now `a` and `b` are Element references
  // ...
})

然后您将不得不采取额外的步骤将 DOM 顺序与结果数组的顺序相匹配。

也就是说，如果您只是想将 pathToHighlight 放在前面，更好的方法是将该单个元素重新附加到 DOM。

如果 pathToHighlight 是一个选择，你会这样做:

var el = pathToHighlight.node();
el.parentNode.appendChild(el);

或者，如果它已经是一个元素引用，您可以这样做:

pathToHighlight.parentNode.appendChild(pathToHighlight);