使用 d3.json 导入本地 json 文件不起作用答案

【问题标题】：Importing local json file using d3.json does not work使用 d3.json 导入本地 json 文件不起作用
【发布时间】：2013-06-17 08:21:42
【问题描述】：

我尝试使用 d3.json() 导入本地 .json 文件。

filename.json 文件与我的 html 文件存储在同一文件夹中。

然而 (json) 参数为空。

d3.json("filename.json", function(json) {
    root = json;
    root.x0 = h / 2;
    root.y0 = 0;});
    . . . 
}

我的代码和这个d3.js example基本一样

【问题讨论】：

如果您使用的是 Chrome，可以尝试使用 --disable-web-security 运行它。
您也可以在您的机器上运行本地服务器并以这种方式访问页面。 WAMP 和 MAMP 都很好用，或者你可以在 MAC 上从命令行运行：lifehacker.com/…
我应该更仔细地阅读 d3.json API。很抱歉浪费了人们的时间。
如果您使用的是 Chrome，命令行开关 --allow-file-access-from-files 比 --disable-web-security 更安全。
可能的根本原因：stackoverflow.com/questions/4819060/…

标签： json d3.js

【解决方案1】：

如果你在浏览器中运行，你cannot load local files。

但是在命令行上运行开发服务器相当容易，只需 cd 进入包含文件的目录，然后：

python -m SimpleHTTPServer

（或 python -m http.server 使用 python 3）

现在在您的浏览器中，转到localhost:3000（或:8000 或命令行上显示的任何内容）。

以下内容曾经在旧版本的 d3 中工作：

var json = {"my": "json"};
d3.json(json, function(json) {
    root = json;
    root.x0 = h / 2;
    root.y0 = 0;
});

【讨论】：

你能解释一下你的代码吗...我将如何从这个d3.json(filename, function(error, data) {...} 开始（我应该提交一个单独的问题吗？）
我会直截了当地说这个答案的代码是错误的，除了 13 个赞成票。 d3.json 将 url 作为其第一个参数，而不是 json 对象。同上 jQuery 的 $.get 方法。如果文件中已经定义了json，则无需通过d3.json或$.get发出ajax请求；只需直接引用变量。还是我在这里遗漏了一些可以解释 13 次投票的内容？
@JamesConkling 变量与文件不同。但是是的，您可以将我示例中的第一行放在它自己的 javascript 文件中，这样也可以。
@mb21 是的，这就是我的意思，如果在脚本文件中定义了 json，为什么要使用d3.json？如果脚本文件中未定义 json，则使用 d3.json 并通过服务器加载脚本。混合这两种方法（在脚本文件和中定义 json 使用 d3.json 完全没有意义）。
@mb21，是的，在这种情况下，d3.json() 接受一个表示文件路径的字符串。在 no 的情况下，d3.json() 应该将 JSON 对象（或字符串以外的任何内容）作为其第一个参数。 see here.

【解决方案2】：

http://bl.ocks.org/eyaler/10586116 请参阅此代码，这是从文件中读取并创建图形。我也有同样的问题，但后来我发现问题出在我正在使用的 json 文件中（一个额外的逗号）。如果你在这里得到 null 尝试打印你得到的错误，就像这样。

d3.json("filename.json", function(error, graph) {
  alert(error)
})

这在 Firefox 中工作，在 chrome 中它不打印错误。

【讨论】：

【解决方案3】：

您无法轻松读取本地文件，至少在 Chrome 中没有，而且可能在其他浏览器中也没有。

最简单的解决方法是简单地将 JSON 数据包含在脚本文件中，然后简单地删除您的 d3.json 调用并将代码保留在您传递给它的回调中。

您的代码将如下所示：

json = { ... };

root = json;
root.x0 = h / 2;
root.y0 = 0;
...

【讨论】：

【解决方案4】：

除了前面的答案之外，使用大多数 Linux/Mac 机器提供的 HTTP 服务器更简单（只需安装 python）。

在项目的根目录中运行以下命令

python -m SimpleHTTPServer

然后不要访问file://.....index.html，而是在http://localhost:8080 或运行服务器提供的端口上打开浏览器。这种方式将使浏览器获取您项目中的所有文件而不会被阻止。

【讨论】：

【解决方案5】：

我用过这个

d3.json("graph.json", function(error, xyz) {
    if (error) throw error;
    // the rest of my d3 graph code here
    }

所以你可以通过使用变量 xyz 来引用你的 json 文件，而 graph 是我本地 json 文件的名称

【讨论】：

【解决方案6】：

在 d3.v5 版本中，你应该这样做

d3.json("file.json").then(function(data){ console.log(data)});

同样，对于 csv 和其他文件格式。

您可以在https://github.com/d3/d3/blob/master/CHANGES.md找到更多详细信息

【讨论】：

请使用edit 链接为您的答案添加更多信息而不是评论。我已经在这篇文章中为你完成了这项工作。
这适用于 html、js 文件和 json 文件。但是我在 Angular 7 中使用它，我得到了 GET 错误。我使用从我找到的 url 中的服务发出的 json，它可以工作。由于某种原因，本地 json 文件不能在 d3.json() 中使用。
@Gel 如果您将 json 文件放在资产文件夹中，这应该可以在 Angular 中使用

【解决方案7】：

使用 (d3)js 加载本地 csv 或 json 文件并不安全。他们阻止你这样做。有一些解决方案可以让它工作。以下行基本上不起作用（csv 或 json），因为它是本地导入：

d3.csv("path_to_your_csv", function(data) {console.log(data) });

解决方案 1： 禁用浏览器中的安全性

不同的浏览器有不同的安全设置，您可以禁用它们。此解决方案可以工作，您可以加载文件。然而，禁用是不可取的。它会让你容易受到各种线程的攻击。另一方面，如果您告诉他们手动禁用安全性，谁会使用您的软件？

禁用 Chrome 中的安全性：

--disable-web-security
--allow-file-access-from-files

解决方案 2： 从网站加载您的 csv/json 文件。

这似乎是一个奇怪的解决方案，但它会起作用。这是一个简单的解决方法，但可能不切实际。有关示例，请参阅here。查看页面源代码。思路是这样的：

d3.csv("https://path_to_your_csv", function(data) {console.log(data) });

解决方案 3： 启动您自己的浏览器，例如Python。

这样的浏览器不包括所有类型的安全检查。当您在自己的机器上试验代码时，这可能是一个解决方案。在许多情况下，当您拥有用户时，这可能不是解决方案。此示例将在端口 8888 上提供 HTTP，除非它已被占用：

python -m http.server 8888
python -m SimpleHTTPServer 8888 &

打开 (Chrome) 浏览器地址栏并在下方键入。这将打开 index.html。如果您有不同的名称，请输入该本地 HTML 页面的路径。

localhost:8888

解决方案 4： 使用本地主机和 CORS

您可以使用本地主机和 CORS，但这种方法对用户不友好，因为设置它可能不是那么简单。

解决方案 5： 将您的数据嵌入到 HTML 文件中

我最喜欢这个解决方案。您可以编写一个将数据直接嵌入到 html 中的脚本，而不是加载您的 csv。这将允许用户使用他们喜欢的浏览器，并且不存在安全问题。这个解决方案可能不是那么优雅，因为您的 html 文件可能会根据您的数据而变得非常困难，但它会起作用。有关示例，请参阅here。查看页面源代码。

删除这一行：

d3.csv("path_to_your_csv", function(data) { })

替换为：

var data = 
    [
        $DATA_COMES_HERE$
    ]

【讨论】：

【解决方案8】：

使用资源作为局部变量

var filename = {x0:0,y0:0};
//you can change different name for the function than json
d3.json = (x,cb)=>cb.call(null,x); 
d3.json(filename, function(json) {
    root = json;
    root.x0 = h / 2;
    root.y0 = 0;});
    //...
}

【讨论】：