D3中自定义排序tsv生成的表答案

【问题标题】：Custom sort tsv-generated table in D3D3中自定义排序tsv生成的表
【发布时间】：2014-08-13 17:25:27
【问题描述】：

知道如何使用 TSV 文件中的数据在 D3.js 中创建自定义排序表吗？用户可以选择要排序的一列（或多列）。

这是我创建表格的 .js：

d3.tsv("data/score.tsv", function(error, data) {
    data.forEach(function(d) {
        d.Name = d.Name;
        d.Id = d.Id;
        d.Score = d.Score;

    });

    function tabulate(data, columns) {
        var table = d3.select("#scoreTable").append("table"),
            thead = table.append("thead"),
            tbody = table.append("tbody");

        // append the header row
        thead.append("tr")
            .selectAll("th")
            .data(columns)
            .enter()
            .append("th")
            .text(function(column) {
                return column;
                });

        // create a row for each object in the data
        var rows = tbody.selectAll("tr")
            .data(data)
            .enter()
            .append("tr");

        // create a cell in each row for each column
        var cells = rows.selectAll("td")
            .data(function(row) {
                return columns.map(function(column) {
                    return {
                        column: column, value: row[column]
                    };
                });
            })
            .enter()
            .append("td")
            .html(function(d) {
                return d.value;
            });

        return table;
    }

    // render the table
    var peopleTable = tabulate(data, ["Name", "Id", "Final Score"]);

});

但我几乎从这里被困住了。我试着看： D3.js trying to implement sortable svg table

和： http://bl.ocks.org/mbostock/3719724

但我不太确定如何将它们翻译成我需要的。非常感谢任何帮助。谢谢。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

你在正确的轨道上......

只需添加以下代码。

thead.append("tr")
     .selectAll("th")
     .data(columns)
     .enter()
     .append("th")
     .text(function(column) {
         return column;
     })
     .on('click', function (d) {
         rows.sort(function (a, b) {
         return a[d] - b[d];
      });
});

添加了on('click', ...) 处理程序。

sort里面的参数是comparator function。 click 回调的参数d 是列名。

【讨论】：

如果值相等，应该按什么顺序排序？
谢谢！但是代码似乎不适用于非数字列，例如名称。
抱歉，有点糊涂了。它失败的是文本字符串。不过，通过添加一个 if-else 来处理字符串 d3.ascending

【解决方案2】：

感谢 pratyush 的帮助，这就是有效的方法。将 on('click', ...) 处理程序添加到 thead 部分，如下所示：

thead.append("tr")
    .selectAll("th")
    .data(columns)
    .enter()
    .append("th")
    .text(function(column) {
        return column;
    })
    .on('click', function (d) {
        rows.sort(function (a, b) {
            if (isNaN(a[d])) {
                return d3.ascending(a[d], b[d]);
            }
            else {
                return b[d] - a[d];
            }
        });
    });

非常感谢，伙计。

【讨论】：