如何从使用D3.js读取的csv文件中排序数字列-列作为字符串读取

How to sort number columns from csv file read in using D3.js - columns read in as strings

本文关键字:读取 数字 排序 -列 字符串 文件 csv D3 js      更新时间:2023-09-26

我使用D3.js读取CSV文件。我想表现在是可排序的取决于是由用户单击的标题。下面的代码按照字母顺序对表中的数据进行完美排序,但是当涉及到成本/节省列时,它们被排序为字符串,如

$999
$87
$8890
$7
$5000

显然是不正确的。我想知道如何对这些列进行数学排序。下面是我的大部分代码(本质上与http://bl.ocks.org/AMDS/4a61497182b8fcb05906相同,只是排序有一点变化):

    </div>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript">
      d3.csv("../reservations/arc.csv", function(error, data) {
              if (error) throw error;
              var sortAscending = true;
              var table = d3.select('#page-wrap').append('table');
              var titles = d3.keys(data[0]);
              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 (sortAscending) {
                                         sortAscending = false;
                                         this.className = 'aes';
                                         rows.sort(function(a, b){return d3.ascending(b[d],a[d])}); 
                                       } else {
                                             sortAscending = true;
                                             this.className = 'des';
                                             rows.sort(function(a, b){ return d3.descending(b[d], a[d])});
                                       }
                               });
              var rows = table.append('tbody').selectAll('tr')
                           .data(data).enter()
                           .append('tr');
              rows.selectAll('td')
                .data(function (d) {
                    return titles.map(function (k) {
                            return { 'value': d[k], 'name': k};
                    });
                }).enter()
                .append('td')
                .attr('data-th', function (d) {
                    return d.name;
                })
                .text(function (d) {
                    return d.value;
                });
      });
    </script>

我猜这些列需要被解析为数字使用Number()和一个简单的正则表达式,但我不确定我将如何做到这一点。我尝试了NaN,但每个列都通过了这个条件,因为它们最初是作为字符串读取的。或者如果有另一个灵活的排序函数

我是javascript新手,所以弥合差距可能有点困难。谢谢你的帮助。

您没有提供数据集的样本,但我假设您已经获得了带有$符号的成本列。

在这种情况下,我将首先切片值:StringValue.slice(1)并获得数值部分。然后尝试使用+一元运算符或parseInt("some string")将其读取为整数。

您需要提供另一个以该列为条件的排序函数。列命名为"Cost":

...
    .on('click', function(d) {
      headers.attr('class', 'header');
      if (sortAscending) {
        if (d === "Cost"){
          rows.sort(function(a, b) {
            var b = +b[d].substring(1),
                a = +a[d].substring(1);
            return b < a;
          });
        }else{
          rows.sort(function(a, b) {
            return b[d] < a[d];
          });
        }
        sortAscending = false;
        this.className = 'aes';
      } else {
        if (d === "Cost"){
          rows.sort(function(a, b) {
            var b = +b[d].substring(1),
                a = +a[d].substring(1);
            return b > a;
          });
        }else{
          rows.sort(function(a, b) {
            return b[d] > a[d];
          });
        }
        sortAscending = true;
        this.className = 'des';
      }
    });