javascript - d3 排序仅适用于选择行

Question

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

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 属性(我无法验证这一点，但我很确定这就是 k 是什么——一个对应于列/属性名称的字符串)。

因此，放弃使用 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]);
})