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。 d回调的参数click是列名。

Answer 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];
            }
        });
    });

非常感谢，伙计。

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

2 个答案: