javascript - D3 中 tsv 生成的表的自定义排序

Question

知道如何使用 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

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

Answer 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 是列名称。