如何在 D3 中正确加载本地 JSON？
Posted
技术标签:
【中文标题】如何在 D3 中正确加载本地 JSON？【英文标题】：How to properly load local JSON in D3? 【发布时间】：2019-03-02 20:08:20 【问题描述】：尝试从 D3 中的同一文件夹加载本地 .json 文件（并将其记录到控制台），但控制台中有两个错误：
d3.v5.js:5908 Fetch API 无法加载 [buildings.json - 文件]。 URL 方案必须是 用于 CORS 请求的“http”或“https”。 json@d3.v5.js:5908（匿名）@ index.html:10
d3.v5.js:5908 Uncaught (in promise) TypeError: Failed to 拿来 在 Object.json (d3.v5.js:5908) 在 index.html:10 json@d3.v5.js:5908（匿名）@index.html:10 Promise.then（异步）（匿名）@index.html:10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v5.js"></script>
</head>
<body>
<script>
d3.json("buildings.json").then(data => console.log(data))
</script>
</body>
</html>有人知道原因并有解决办法吗？
【问题讨论】：
如果那是您的数据源，请不要使用 d3.json 来获取您的数据 【参考方案1】：d3.json 使用fetch。
export default function(input, init)
return fetch(input, init).then(responseJson);
https://github.com/d3/d3-fetch/blob/master/src/json.js
所以您正在处理这些 SO 帖子中描述的相同问题。
Importing local json file using d3.json does not work
"Cross origin requests are only supported for HTTP." error when loading a local file
Fetch API cannot load file:///C:/Users/woshi/Desktop/P5/p5/JSON/birds.json. URL scheme must be "http" or "https" for CORS request
您正面临跨源资源共享问题，这是您浏览器的一项安全功能。
两个选项二避免这种情况：
使用网络服务器。要为您的静态 html/js 文件运行一个简单的网络服务器，可以使用类似 npm http-server (https://www.npmjs.com/package/http-server) 的东西
更改您的 chrome 启动参数，并让它知道您要忽略此安全功能。您可以通过更改启动配置来做到这一点，例如这样
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="%LOCALAPPDATA%\Google\Chrome\User Data\发展”
参数 --disable-web-security --user-data-dir 是这里的重要部分。
注意：仅用于开发。您允许对您访问的所有网站进行跨源请求。
【讨论】：
【参考方案2】：How to launch html using Chrome at "--allow-file-access-from-files" mode? 中提到的另一种可能性是使用像 Web Server for Chrome 这样的浏览器扩展
【讨论】：
以上是关于如何在 D3 中正确加载本地 JSON？的主要内容，如果未能解决你的问题，请参考以下文章