javascript - D3.js 可以使用 "whitespace"分隔值获取数据吗？

Question

D3.js 有 tsv 和 csv 提取。假设我们有数据:

x  y 
1     3
  2.2     -1.8
 3  4

数据实际上可以仅用空格分隔吗？我们可以编写一个预处理器来通过空格分割文件来转换文件，例如

const data = `x  y 
1     3
  2.2     -1.8
 3  4`;

console.log(data.split("\n").map(line => line.trim().split(/\s+/).join("\t")).join("\n"));

但是有没有办法直接使用D3.js并通过上面的方式获取数据？

Answer 1

您可以在d3.dsv(代表分隔符分隔值)中设置不同的分隔符，尽管逗号 (CSV) 和制表符 (TSV) 是迄今为止最常用的分隔符。最常见的。

首先，设置分隔符:

const whiteSpaceParser = d3.dsvFormat(" ");

然后，使用 parse() 方法解析文件:

const data = whiteSpaceParser.parse(file);

这是演示:

const file = `x y
1 3
2.2 -1.8
3 4`;

const whiteSpaceParser = d3.dsvFormat(" ");
const data = whiteSpaceParser.parse(file, d3.autoType);

console.log(data)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js"></script>

由于这是一个 Stack Overflow 代码片段，我无法使用真实的文件，因此使用模板文字。对于真实文件(例如txt文件)，只需使用d3.dsv并以空格作为分隔符，如下所示:

d3.dsv(" ", "foo.txt").then((data) => {
    //code here
});