在 d3.queue 中解析资源答案

【问题标题】：Parse resource in d3.queue在 d3.queue 中解析资源
【发布时间】：2017-11-18 05:46:14
【问题描述】：

我正在使用 d3.queue 在绘制可视化之前加载两个不同的资源。

如果资源不需要解析，任务很容易完成：

d3.queue()
  .defer(d3.text, 'file1.txt')
  .defer(d3.json, 'file2.json')
  .await(draw);

现在，假设file.txt 具有以下结构：

STATE|STUSAB|STATE_NAME|STATENS
01|AL|Alabama|01779775
02|AK|Alaska|01785533
04|AZ|Arizona|01779777

我知道我可以使用d3.dsvFormat('|') 来解析这个文件，但是我怎样才能在队列中进行呢？

这是JSFiddle

我正在使用的文件可以在这里找到：National FIPS and GNIS Codes File

【问题讨论】：

标签： javascript parsing d3.js text-parsing

【解决方案1】：

你不能像你那样在延迟任务中进行解析，例如对于d3.json，因为没有方便的方法来一次请求和解析您的内容。在处理分隔符分隔值时，D3 仅提供逗号 (d3.csv) 和制表符 (d3.tsv) 的便捷方法。这些将请求资源并在一次运行中解析内容。然后将使用已解析的内容调用 await 回调。

由于您使用的是不同的分隔符，即管道"|" 字符，因此您必须一个接一个地执行这两个步骤。在队列中，您仍然可以使用d3.text 来请求文件的文本内容。然而，解析必须在await 回调中使用d3.dsvFormat("|").parse 完成。必要的部分已经包含在您的代码中；您只需要使用psv 在您的draw() 函数中进行解析：

const psv = d3.dsvFormat('|');

const draw = (error, data1, data2) => {
  console.log(psv.parse(data1));         // Do the parsing in await
  console.log(data2);
}

const queue = d3.queue();
queue
  .defer(d3.text, url1)                  // Load textual contents
  .defer(d3.json, url2)
  .await(draw);

查看更新后的 JSFiddle 以获取工作示例。

【讨论】：

【解决方案2】：

我查看了d3-request 代码，并实现了一个加载和解析管道分隔的.txt 文件的函数。和json.js的代码基本一样。

import * as d3RequestType from '../../node_modules/d3-request/src/type';

const d3Psv = d3RequestType.default('text/plain', (xhr) => {
  const psv = d3.dsvFormat('|');
    return psv.parse(xhr.responseText);
});

const queue = d3.queue();
queue
  .defer(d3Psv, 'file1.txt')
  .defer(d3.json, 'file2.json')
  .await(draw);

在另一个项目中，我必须加载一个文件，其中值用分号分隔，我使用了相同的方法。

请注意，您还可以将 rowFunction 作为 psv.parse 的第二个参数传递。

【讨论】：