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