d3 日期时间和 table 中的整数

Question

使用 sortable table by Mingsong Hu 我在某些列中显示时间和整数。

这是jsFiddle

我可以获得要显示的时间和整数，但这是最好的方法吗？我觉得这是一个真正的黑客！

table 列的可排序性工作不正常。我认为这是由于需要能够按时间排序、按字母顺序排序或按整数排序。

   var rows = table.append('tbody').selectAll('tr')
      .data(data).enter()
      .append('tr');
    rows.selectAll('td')
      .data(function(d) {
        return titles.map(function(k) {
          return {
            'category': d[k],
            'name': k
          };
        });
      }).enter()
      .append('td')
      .attr('data-th', function(d) {
        return d.name;
      })
      .text(function(d) {
        if (timeformat(d.category) == "NaN:NaN") {
          return d.category
        } else if (timeformat(d.category) == "00:00") {
          return +d.category
        } else {
          return timeformat(d.category)
        }
      });

Answer 1

我已修复它，以便某些列按字母顺序排序，其余列按数字排序。我还使用 typeof()=="object"

修复了时间显示的时间格式

gh-pages 上的更新 jsFiddle also on github and demo。

这是新代码，

 var sortAscending = true;
    var table = d3.select('#page-wrap').append('table');
    var titles = d3.keys(data[0]);
    var titles = ["raceplace", "name", "club", "clocktime", "category", "handicap", "racetime", "timeplace", "points"]
    var headers = table.append('thead').append('tr')
      .selectAll('th')
      .data(titles).enter()
      .append('th')
      .text(function(d) {
        return d
      })
      .on('click', function(d) {
        headers.attr('class', 'header');
        if (d == "name" || d == "club" || d == "category") { //these keys sort alphabetically
          // sorting alphabetically");
          if (sortAscending) {
            rows.sort(function(a, b) {
              return d3.ascending(a[d], b[d]);
            });
            sortAscending = false;
            this.className = 'aes';
          } else {
            rows.sort(function(a, b) {
              return d3.descending(a[d], b[d]);
            });
            sortAscending = true;
            this.className = 'des';
          }
        } else {
          if (sortAscending) {
            //all other keys sort numerically including time
            rows.sort(function(a, b) {
              return b[d] - a[d];
            });
            sortAscending = false;
            this.className = 'aes';
          } else {
            rows.sort(function(a, b) {
              return a[d] - b[d];
            });
            sortAscending = true;
            this.className = 'des';
          }
        }
      });

    var rows = table.append('tbody').selectAll('tr')
      .data(data).enter()
      .append('tr');
    rows.selectAll('td')
      .data(function(d) {
        return titles.map(function(key, i) {
          return {
            'value': d[key],
            'name': d
          };
        });
      }).enter()
      .append('td')
      .attr('data-th', function(d) {
        return d.name;
      })
      .text(function(d) {
        //console.log("typeof(" + d.value + "): " + typeof(d.value));
        if (typeof(d.value) == "object") {
          //console.log("Yippee it's an object");
          return timeformat(d.value)
        } else {
          return d.value
        }
      });