Każdy pomysł, jak utworzyć stół sortowalny dla niestandardowego w D3.js z danymi z pliku TSV? Użytkownik może wybrać kolumnę (lub kolumny) do sortowania.

Oto moje .js, aby utworzyć tabelę:

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"]);

});

Ale stąd tkwi mnie. Próbowałem patrzeć na: D3.js próbujący wdrożyć sortowalną tabelę SVG

I: http://bl.ocks.org/mbostock/371724

Ale nie jestem pewien, jak je przetłumaczyć na to, czego potrzebuję. Naprawdę doceniłoby jakąkolwiek pomoc. Dzięki.

2
kenlim 13 sierpień 2014, 21:25

2 odpowiedzi

Najlepsza odpowiedź

Jesteś na dobrej drodze...

Wystarczy dodać następujący kod.

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

Dodano Handler on('click', ...).

Parametr Inside Sortuj jest a Funkcja komparatora. Argument d do wywołania zwrotnego click jest nazwą kolumny.

1
pratyush 13 sierpień 2014, 18:29

Dzięki pomocy Pratyush, oto to, co działało. Dodano THE ON ('Click', ...) Dostęp do części THEAD, aby wygląda tak:

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

Dzięki dużo, koleś.

1
kenlim 14 sierpień 2014, 01:56