48

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

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

然而 (json) 参数为空。

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

我的代码与此d3.js 示例中的代码基本相同

4

8 回答 8

52

如果您在浏览器中运行，则无法加载本地文件。

但是在命令行上运行开发服务器相当容易，只需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;
});
于 2013-06-20T20:57:05.907 回答
16

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

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

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

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

于 2018-12-18T21:49:36.867 回答
9

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

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

python -m SimpleHTTPServer

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

于 2016-12-13T22:42:22.783 回答
6

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

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

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

于 2015-04-20T08:57:11.400 回答
5

使用 (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 文件。

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

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 文件可能会根据您的数据而增长得非常困难，但它会起作用。有关示例，请参见此处。查看页面源代码。

删除这一行：

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

替换为：

var data = 
    [
        $DATA_COMES_HERE$
    ]
于 2020-09-13T14:37:05.287 回答
1

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

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

您的代码将如下所示：

json = { ... };

root = json;
root.x0 = h / 2;
root.y0 = 0;
...
于 2016-05-11T15:18:36.897 回答
0

我用过这个

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

因此您可以使用变量 xyz 来引用您的 json 文件，而 graph 是我本地 json 文件的名称

于 2018-07-25T15:23:43.317 回答
-1

使用资源作为局部变量

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;});
    //...
}
于 2022-01-06T10:17:34.683 回答