file - 在 D3 中加载分隔符分隔的值

Question

我正在尝试使用通用 d3.dsvFormat() 函数在 D3 中加载管道分隔值文件。虽然我没有收到错误，但没有任何反应，我认为这是因为回调函数没有执行。

我确实检查了这里的文档，但没有发现它有帮助:https://github.com/d3/d3-dsv/blob/master/README.md#dsvFormat

我的语法有问题吗？

var psv = d3.dsvFormat("|");
psv.parse("my_file.txt", function(error, data) {
    Do a bunch of stuff with the data....
    console.log(data);  //nothing happens here
});

Answer 1

psv.parse 想要文本，您正在传递文本 - 只是其中没有任何管道:“my_file.txt”。由于这是一行文本，并且第一行文本转换为列名称，因此您不会获得任何数据。

你的问题是 psv.parse 不会为你获取像 d3.csv 或 d3.tsv 这样的文件(而是 psv.parse() 的行为类似于 d3.csvParse()或 d3.tsvParse())。幸运的是，解决这个问题并不太难。

如果我们查看 d3.csv 的 API 文档，我们可以为任何分隔文件重新创建相同的功能。使用 d3.csv，

If a callback is specified, a GET request is sent, making it equivalent to:

d3.request(url)
    .mimeType("text/csv")
    .response(function(xhr) { return d3.csvParse(xhr.responseText, row); })
    .get(callback);

( from API docs )

我们只需为管道分隔的文件模拟这一点:

var psv = d3.dsvFormat("|");

d3.request("my_file.txt")
  .mimeType("text/plain")
  .response(function(data) { return psv.parse(data.response) })
  .get(function(data) {
     console.log(data);
  });

它比普通的旧 d3.csv() 或 d3.tsv() 稍微冗长一些，但使用 get 方法中的回调函数实现了相同的结果。

您还可以在响应方法中使用 data.responseText，但我不确定有什么区别，在我的快速测试中两者看起来相同。

您可能还注意到，我没有在响应方法中指定行函数，这是一个可选函数，允许“将行对象转换为更具体的表示形式”，例如:返回数字而不是字符串。 API documentation ).

<小时/>

最后一点:

相对于您的原始代码，psv.parse("text") 返回数据，您不为此方法使用回调函数。以下代码片段演示了如何解析直管分隔文本:

var psv = d3.dsvFormat("|");
var data = psv.parse("a|b\n1|2\n4|3")
console.log(data);

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