javascript - 如何在不调用 "transition()"的情况下对 D3 生成的 HTML 表进行排序？

Question

我试图了解如何在不显式使用 D3“transition()”调用的情况下转换 D3 生成的 HTML 表。

原始代码是Mike Bostock的可排序表:http://bl.ocks.org/mbostock/3719724

大部分代码从 CSV 文件读取数据，将其映射到不同的列标题名称并呈现 HTML 表格:

d3.csv("readme-states-age.csv", function(states) {
  var ages = d3.keys(states[0]).filter(function(key) {
    return key != "State" && key != "Total";
  });

  d3.selectAll("thead td").data(ages).on("click", function(k) {
    tr.sort(function(a, b) { return (b[k] / b.Total) - (a[k] / a.Total); });
  });

  var tr = d3.select("tbody").selectAll("tr")
      .data(states)
    .enter().append("tr");

  tr.append("th")
      .text(function(d) { return d.State; });

  tr.selectAll("td")
      .data(function(d) { return ages.map(function(k) { return d[k] / d.Total; }); })
    .enter().append("td").append("svg")
      .attr("width", 71)
      .attr("height", 12)
    .append("rect")
      .attr("height", 12)
      .attr("width", function(d) { return d * 71; });
});

表格的排序似乎是通过此“单击”回调进行的:

  d3.selectAll("thead td").data(ages).on("click", function(k) {
    tr.sort(function(a, b) { return (b[k] / b.Total) - (a[k] / a.Total); });
  });

我看到对数据记录 (tr) 的结果选择调用了“sort()”函数，但我不明白如何实际应用转换来重新排序表。这似乎就发生了。

有人可以解释一下如何以及为什么可以在不显式调用 d3.transition() 函数的情况下实现排序吗？

Answer 1

有 50 个州 - 下面的代码创建 50 行，并将 50 行中的每一行分别绑定(bind)到 50 行(每行包含不同年龄段的值)

var tr = d3.select("tbody").selectAll("tr")
         .data(states)
         .enter().append("tr");

onclick 函数以列标题的名称(5-13,14-17,18-24...)传递 - 排序函数按降序返回单击的列的值，进而对整个列进行排序行。

d3.selectAll("thead td").data(ages).on("click", function(k) {
    tr.sort(function(a, b) { return (b[k] / b.Total) - (a[k] / a.Total); });
  });