javascript - 在事先不知道属性名称的情况下转换 d3.js 中的数据类型(检测字符串是否仅包含数字)

Question

在 d3.js 中。我可以像这样在我的网络应用程序中读取用户上传的 CSV 文件:

d3.csv("upload.csv", function(data) {
  console.log(data[0]);
});

这导致所有内容都作为字符串读入。但是，我需要能够将数字数据类型视为数字。

如果我提前知道属性名称，我可以这样做:

d3.csv("upload.csv", function(data) {
  data.forEach(function(d) {
    d.population = +d.population;
    d["land area"] = +d["land area"];
  });
  console.log(data[0]);
});

但是，由于这是用户提供的数据，因此无法提前知道属性名称。有没有办法检测字段只包含数字，然后相应地更改数据类型？也许是某种带有正则表达式测试的条件语句？

示例改编自 this教程。

Answer 1

新答案:

D3 v5.8 介绍了非常方便的方法 d3.autotype ，这使得这项任务非常简单:

var data = d3.csvParse(d3.select("#csv").text(), d3.autoType);

console.log(data);

pre {
  display: none;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<pre id="csv">header1,header2,header3
foo,foo2,1212
bar,bar2,2345
baz,baz2,7623</pre>

---

(原始答案)

正如在 comments 中讨论的那样，您可以使用正则表达式检查字符串是否仅包含数字。然后，如果是，则将其强制转换为一个数字。

在下面的演示中，我使用了 <pre>存储数据，因为我不能使用实际的 d3.csv Stack 片段中的函数。

在模拟的 CSV 中有三列。其中之一，header3 , 有数字。我们知道这一点，但代码并不知道:它只是使用正则表达式检查所有值，并将仅包含数字的字符串强制转换为数字。

var data = d3.csvParse(d3.select("#csv").text());

data.forEach(function(d) {
  for (var key in d) {
    if (/^\d+$/.test(d[key])) {
      d[key] = +d[key]
    }
  }
});

console.log(data);

pre {
  display: none;
  }

<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="csv">header1,header2,header3
foo,foo2,1212
bar,bar2,2345
baz,baz2,7623</pre>

这解决了您的问题，即“检测字符串是否只包含数字”。但是，如果您还想处理负数、科学记数法和 float ，您可以放弃正则表达式并使用更优雅的方式:

在 JavaScript 中，NaN不等于任何东西，甚至不等于它自己。由于将一元运算符与非数字的内容一起使用会返回 NaN ，你可以简单地做:

if (+d[key]===+d[key]) {
  d[key] = +d[key]
}

这是另一个演示，带有负数、 float 和科学记数法:

var data = d3.csvParse(d3.select("#csv").text());

data.forEach(function(d) {
  for (var key in d) {
    if (+d[key]===+d[key]) {
      d[key] = +d[key]
    }
  }
});

console.log(data);

pre {
  display: none;
  }

<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="csv">header1,header2,header3
foo,foo2,12.12
bar,bar2,-2345
baz,baz2,2.4e6</pre>