javascript - 如何在 D3.js 中读取 Blob

Question

我需要下载一个 blob，然后读取值并创建 D3 图表。到目前为止，我已成功从 Azure 容器下载 blob 文件。但我不知道如何从中获取值并将其提供给 d3.js。据我所知，D3 可以读取 CSV 文件，因此我尝试将 blob 转换为 CSV 文件，但没有成功。有没有办法做到这一点 ？谢谢!

const AzureService = {
  execute: async function() {
    const accountName = STORAGE_ACCOUNT_NAME;
    const blobName = "xxxxxxxxxxxxxxxxxxxxx";
    const sasString = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
    const containerName = "xxxxxxxxxxxxxxxxxxxxxxxxxx";
    const containerURL = new azblob.ContainerURL(
      `https://${accountName}.blob.core.windows.net/${containerName}?${sasString}`,
      azblob.StorageURL.newPipeline(new azblob.AnonymousCredential())
    );
    const blobURL = azblob.BlobURL.fromContainerURL(containerURL, blobName);

    const downloadBlobResponse = await blobURL.download(azblob.Aborter.none, 0);
    return await downloadBlobResponse.blobBody;
  }
};

在服务中获取 blob

componentDidMount() {
  this.file = AzureService.execute().then(data => {
    this.readCSVs(data);
  });
}

我正在尝试转换 blob 并使用 D3.csv 进行读取

readCSVs(data) {
  let contentType = "text/csv";
  let csvFile = new Blob([data], { type: contentType });

  let svg, productName, filtered;
  d3.csv(csvFile).then(data => {
    svg = d3
      .select("#users_bar2")
      .style("width", 500)
      .style("height", 500);

    productName = "CLeg";
    filtered = data.filter(x => x.productName == productName);
    this.histogram(svg, filtered, 500, 500, "hist", productName);
  });
}

Answer 1

基于可用文档 here ，您可以使用 d3.csv 文件直接从 Blob 中读取(无需单独的函数从 Azure Blob 存储中读取)。

d3.csv(`https://${accountName}.blob.core.windows.net/${containerName}?${sasString}`, row, callback)

哪里

row: parser function to parse a record (row) into JSON format

callback: callback function