如何在 D3 中正确加载本地 JSON？答案

【问题标题】：How to properly load local JSON in D3?如何在 D3 中正确加载本地 JSON？
【发布时间】：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 来获取您的数据

标签： json d3.js

【解决方案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 帖子中描述的相同问题。

您正面临跨源资源共享问题，这是您浏览器的一项安全功能。

两个选项二避免这种情况：

使用网络服务器。要为您的静态 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 这样的浏览器扩展

【讨论】：