Question

我正在使用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

Answer 1

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

由于您使用的是不同的分隔符，即管道"|"字符，因此您必须依次执行这两个步骤。在队列中，您仍然可以使用d3.text来请求文件的文本内容。但是，解析必须使用d3.dsvFormat("|").parse在await回调中完成。必要的部分已包含在您的代码中;您只需使用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以获取有效工作示例。

Answer 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的第二个参数传递。

在d3.queue

2 个答案: