更改 D3.js 中數據的排序

Question

我正在使用 D3.js 渲染表格。 初始渲染根據一個鍵對數據進行排序。 我不明白在哪里可以攔截排序並將其綁定到 header 列上的單擊事件。

渲染表格的工作代碼如下：

d3.csv("ranks.csv", function(error, data) {
    if (error) throw error;


    //sort the data by overall ranking
    data = data.sort(function(a, b) {
      return +a.touchdowns_rank - +b.touchdowns_rank;
    });

    render(data);
  });

  // RENDER TABLE
  function render(data) {
    // append the rows
    var tr = d3
      .select("tbody")
      .selectAll("tr")
      .data(data)
      .enter()
      .append("tr");

    // for each column append a th

    tr.append("th").html(function(d) {
      console.log(d);
      first_column = `<img class="teamlogo" src="Arizona.gif" alt="Arizona" />
            <span class="city-name">${d.City}</span><br />
            <span class="team-name">${d.team}</span>
          </th>`;
      return first_column;
    });

    tr.append("th")
      .text(function(d) {
        console.log(d);
        return d.touchdowns_rank;
      });

    tr.append("th")
      .text(function(d) {
        console.log(d);
        return d.ticket_rank;
      });

    tr.append("th")
      .text(function(d) {
        console.log(d);
        return d.precipitation_rank;
      })
      .style("background-color", d => cellColor(d.precipitation_rank))
      .style("font-size", 0);

    tr.append("th")
      .text(function(d) {
        console.log(d);
        return d.beer_rank;
      });

  }