如何从使用D3.js读取的csv文件中排序数字列-列作为字符串读取
How to sort number columns from csv file read in using D3.js - columns read in as strings
我使用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';
}
});
相关文章:
- 从桌面读取python文件时高亮显示代码
- Javascript-如何读取json文件中的列并将其保存在Javascript数组中
- 使用Dnamics CRM 2011中的JavaScript读取子网格的所有记录,而不考虑活动页面
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- 节点Js:How to catch a“;没有这样的文件或目录“;读取线模块出错
- 测试索引值是否等于某个数字的倍数
- 从JS中的字符串中读取数字的库
- Uncaught SyntaxError:尝试读取json数据时出现意外数字
- 将PHP代码转换为Javascript,将数字读取为句子
- 从表单 javascript 中读取数字值
- 使用 Javascript 从 innerHTML 中搜索和读取数字的值
- 如何从条形码读取两个或多个数字输入
- 南?为什么浏览器不会将其读取为数字
- 在Node.js中读取和解析数字ASCII对文件的最快方法是什么
- 从移动相机读取文本或数字
- 用JavaScript从输入中读取数字总是返回NaN
- 从包含字母数字的命名空间读取JSON出错
- 如何从使用D3.js读取的csv文件中排序数字列-列作为字符串读取
- JavaScript错误地试图将path读取为数字-输出NaN
- D3读取csv/tsv文件,如果列名是数字