时间戳

首页 > 解决方案 > D3.js 可以使用“空白”分隔值获取数据吗？

javascript - D3.js 可以使用“空白”分隔值获取数据吗？

问题描述

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 并通过上述方式获取数据？

标签： javascriptd3.js

解决方案

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

首先，设置分隔符：

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>

由于这是一个堆栈溢出片段，我不能使用真实文件，因此模板文字。对于一个真实的文件（例如，一个txt文件），只需使用d3.dsv空格作为分隔符，如下所示：

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

推荐阅读