d3.js从URL获取JSON

Question

情况是我正试图让d3读取存储在Windows Azure Blob存储中的JSON文件。如果我将网址粘贴到浏览器中，那么该文件就会下载到我的计算机上。我希望能够使用d3从网址获取JSON文件，但没有生成任何图表，这导致我认为d3无法读取该文件。

这是代码片段：

            var url = "http://storageName.blob.core.windows.net/containerName/file.json";

            d3.json("url", function (json) {

             //code here
            })

我已将Azure上的容器设置为公共，因此我相信任何人都可以通过URL访问它。 有什么建议吗？

- Cathal

---

我在访问URL时遇到了以下错误：请求输入中的一个已超出范围。RequestId:9bddf99a-7459-4eba-a962-bd85452442d8 Time:2014-03-11T12:56:47.5460693Z这是正确的URL吗？ - Lakshmi Narayanan

不，这不是正确的URL！由于明显的原因，我无法在此分享URL！ - Cathal

运行代码时是否出现任何错误信息？ - Lars Kotthoff

是的Lars，我收到了“XMLHttpRequest无法加载http://storage.blob.core.windows.net/container/file.json。所请求的资源上没有'Access-Control-Allow-Origin'标头。因此，源'http://localhost:50332'不允许访问。” - Cathal

Answer 1

应该是:

var url = "http://storageName.blob.core.windows.net/containerName/file.json";
d3.json(url, function (json) {
    //code here
});

- YingDynasty

---

这将在CORS违规中运行。 - Martin Stein

Answer 2

适用于2019年：

d3.json("http://127.0.0.1:8080/mydata.json").then( data => {
    console.log(data);
})

- Peter Ivanoff

Answer 3

在您的Blob上，您需要设置Content-Type HTTP头为"application/json"。

这可以通过编程或使用REST API完成，或者使用免费的实用程序，例如Azure Blob存储的Cloudberry Explorer。

- bedane

---

谢谢您的建议。当您提到设置内容类型时，我能在创建Blob时在服务器端完成吗？还是必须在客户端完成？ - Cathal

感谢您的建议，我按照您所说的做了，并将AllowedOrigins设置为*，现在我可以使用JSON文件了。 - Cathal

Answer 4

使用REST API时，请使用d3.request：

d3.fetch("api_url/path")
.header("Content-Type", "application/json")
.post(function(data) {
   console.log(data);
})

- dipankar

---

从d3 V5开始，d3.request已被弃用。请改用d3.fetch。 - Anisur Rahaman Sakib