我尝试使用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
基本相同答案 0 :(得分：34)
如果您在浏览器中运行，则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;
});
答案 1 :(得分：6)
http://bl.ocks.org/eyaler/10586116 请参阅此代码，这是从文件读取并创建图形。 我也有同样的问题，但后来我发现问题出在我正在使用的json文件中（一个额外的逗号）。如果你在这里得到null，请尝试打印你得到的错误，就像这样。
d3.json("filename.json", function(error, graph) {
alert(error)
})
这是在Firefox中工作，在某种程度上它不会打印错误。
答案 2 :(得分：6)
除了以前的答案之外，使用大多数Linux / Mac机器提供的HTTP服务器更简单（只需安装python）。
在项目的根目录中运行以下命令
python -m SimpleHTTPServer
然后，而不是访问file://.....index.html在http://localhost:8080上打开浏览器或运行服务器提供的端口。这种方式将使浏览器获取项目中的所有文件而不会被阻止。
答案 3 :(得分：3)
在d3.v5版本中，您应该按照
d3.json("file.json").then(function(data){ console.log(data)});
类似地，使用csv和其他文件格式。
中找到更多详细信息答案 4 :(得分：3)
使用（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文件
我最喜欢这种解决方案。无需加载csv，您可以编写一个将数据直接嵌入html的脚本。这将允许用户使用他们喜欢的浏览器，并且没有安全问题。这个解决方案可能不是那么优雅，因为您的html文件可能会变得非常困难，具体取决于您的数据，但是它可以正常工作。有关示例，请参见here。查看页面源。
删除此行：
d3.csv("path_to_your_csv", function(data) { })
替换为：
var data =
[
$DATA_COMES_HERE$
]
答案 5 :(得分：1)
您无法随时 阅读本地文件，至少不会在Chrome中，也可能不在其他浏览器中阅读。
最简单的解决方法是简单地将JSON数据包含在脚本文件中，然后简单地删除d3.json调用，并将代码保存在传递给它的回调中。
您的代码将如下所示：
json = { ... };
root = json;
root.x0 = h / 2;
root.y0 = 0;
...
答案 6 :(得分：0)
我用过这个
d3.json("graph.json", function(error, xyz) {
if (error) throw error;
// the rest of my d3 graph code here
}
因此您可以使用变量xyz来引用json文件，而graph是我的本地json文件的名称