我尝试使用导入本地.json文件d3.json().
该文件filename.json存储在与我的html文件相同的文件夹中.
然而(json)参数是空的.
d3.json("filename.json", function(json) {
root = json;
root.x0 = h / 2;
root.y0 = 0;});
. . .
}
我的代码与此d3.js示例中的代码基本相同
mb2*_*b21 40
如果您在浏览器中运行,则无法加载本地文件.
但是在命令行上运行开发服务器,只需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;
});
Man*_*nas 15
在 d3.v5 版本中，您应该这样做
d3.json("file.json").then(function(data){ console.log(data)});
同样，使用 csv 和其他文件格式。
您可以在https://github.com/d3/d3/blob/master/CHANGES.md找到更多详细信息
小智 8
添加到以前的答案,使用大多数Linux/Mac机器提供的HTTP服务器更简单(只需安装python).
在项目的根目录中运行以下命令
python -m SimpleHTTPServer
然后,而不是访问file://.....index.html打开您的浏览器http://localhost:8080或运行服务器提供的端口.这种方式将使浏览器获取项目中的所有文件而不会被阻止.
使用 (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$
]
http://bl.ocks.org/eyaler/10586116 请参阅此代码,这是从文件中读取并创建图形.我也有同样的问题,但后来我发现问题出在我正在使用的json文件中(一个额外的逗号).如果你在这里得到null,请尝试打印你得到的错误,就像这样.
d3.json("filename.json", function(error, graph) {
alert(error)
})这是在Firefox中工作,在某种程度上它不打印错误.