如何在没有“transition()”调用的情况下对 D3 生成的 HTML 表进行排序？答案

【问题标题】：How is it possible to sort a D3 generated HTML table with no "transition()" call?如何在没有“transition()”调用的情况下对 D3 生成的 HTML 表进行排序？
【发布时间】：2016-02-29 22:38:34
【问题描述】：

我试图了解如何在不显式使用 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() 函数的情况下实现排序吗？

【问题讨论】：

.transition() 只是将动画添加到选择状态的变化中。示例中没有动画（状态也没有变化），所以没有什么可以转换的。
不仅没有过渡，而且如果您真的想要过渡（即<tr>s 字面上动画到他们的新位置），则需要大量工作才能实现。实际上，在这种情况下您不会使用表格。您必须将每一行绝对定位在某个位置，您必须自己计算。

标签： javascript jquery d3.js html-table transitions

【解决方案1】：

有 50 种状态 - 下面的代码创建 50 行并将 50 行中的每一行分别绑定到 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); });
  });

【讨论】：