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

如何在D3.js中读取Blob

1 个答案: