d3日期时间和表中的整数

问题描述：

使用sortable table Mingsong Hu我在某些列中显示时间和整数。d3日期时间和表中的整数

我能得到的时间和整数显示，但是这是做的最好的方法是什么？我觉得这是一个真正的黑客！

表格列的排序功能无法正常工作。我认为这是由于需要能够按时间或按字母顺序或整数排序。

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

答

我已修复它，以便某些列按字母顺序排序，其余按数字排序。我也修正了时间显示的时间格式，使用typeof（）==“object”

更新的jsFiddle也在github和demo在gh页上。

这里的新代码，

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

d3日期时间和表中的整数

相关推荐