d3 sort 仅适用于选择行

Question

我正在尝试使用 sort 函数按升序对表中的行进行排序。

var forsort = d3.keys(csv[0]).filter(function(key) {
    return key != "name";
});

var tr = d3.selectAll("tbody tr");      
d3.selectAll("thead th").data(forsort).on("click", function(k) {
    tr.sort(d3.ascending);
});

由于某种原因，18 行中只有 3 行被交换（准确地说是第 2、3、11 行），第 2 行是第一个可排序的行。

谁能告诉我问题出在哪里？

Answer 1

从 d3 文档中，d3.ascending 看起来像这样

function(a, b) {
  return a < b ? -1 : a > b ? 1 : 0;
}

在您的情况下，a 和 b 是什么？相反，您可以按如下方式进行检查：

tr.sort(function(a,b){ console.log('compare', a, b); });

我猜a 和b 是对象，在这种情况下，用大于/小于-than 对它们进行排序是没有意义的。

编辑：

要按被点击的列的键排序，您需要使用从点击处理程序获得的k 属性（我无法验证这一点，但我很确定这就是@ 987654329@ 是 - 对应于列/属性名称的字符串。

所以，放弃使用 d3.ascending 并像这样进行排序：

tr.sort(function(a, b) {
  return a[k] < b[k] ? -1 : a[k] > b[k] ? 1 : 0;
})

或者，您仍然可以像这样使用 d3.ascending：

tr.sort(function(a, b) {
  return d3.ascending(a[k], b[k]);
})

原则上没有太大区别。但是，后者的一个好处是它可以更容易地实现一些可以让用户控制排序方向（升序与降序）的东西。像这样的：

var sortFunction = d3.ascending;
// Instead of the line above, you could write some logic
// to decide whether sortFunction is d3.ascending or d3.descending

// Then you can write:
tr.sort(function(a, b) {
  return sortFunction(a[k], b[k]);
})