json - 如何在 D3 中正确加载本地 JSON？-6ren

json - 如何在 D3 中正确加载本地 JSON？

转载作者：行者123 更新时间：2023-12-04 08:30:23

26

4

尝试从 D3 中的同一文件夹加载本地 .json 文件(并将其记录到控制台)，但控制台中有两个错误:

d3.v5.js:5908 Fetch API cannot load [buildings.json - file]. URL scheme must be "http" or "https" for CORS request. json @ d3.v5.js:5908 (anonymous) @ index.html:10

d3.v5.js:5908 Uncaught (in promise) TypeError: Failed to fetch at Object.json (d3.v5.js:5908) at index.html:10 json @ d3.v5.js:5908 (anonymous) @ index.html:10 Promise.then (async) (anonymous) @ 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 使用 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

You are facing a problem with cross origin resource sharing which is a security feature by your browser.

Two options two avoid this:

use a webserver. To just run a simple webserver for your static html/js files something like the npm http-server (https://www.npmjs.com/package/http-server) could be used

Change your chrome startup parameters and let it know that you want to ignore this security feature. You can do this by changing your startup configuration for example like this

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="%LOCALAPPDATA%\Google\Chrome\User Data\development"

The parameters --disable-web-security --user-data-dir are the important part here.

Note: Just use this for development. You allow cross origin requests by this for all websites you visit.

关于json - 如何在 D3 中正确加载本地 JSON？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52528018/

26

4

0

文章推荐： apache-flex - Flex 代码区域？

文章推荐： Eclipse/Aptana 文件同步解决方案

文章推荐： function - 在谷歌驱动器上，文件夹是否存在总是返回 false

文章推荐： entity-framework - Entity Framework : Conditional foreign key

json - mongoexport - JSON 查询问题(扩展 JSON - JSON 输入无效)
最近开始学习MongoDB。今天老师教了我们 mongoexport 命令。在练习时，我遇到了一个典型的问题，包括教练在内的其他同学都没有遇到过。我在我的 Windows 10 机器上使用 Mongo
json - 如何将 JSON Schema 链接到我的 JSON 以验证 JSON？
我是 JSON Schema 的新手，读过什么是 JSON Schema 等等。但我不知道如何将 JSON Schema 链接到 JSON 以针对该 JSON Schema 进行验证。谁能解释一下？
json - 仅使用 json 在另一个 json 文件中包含一个 json 文件
在 xml 中，我可以在另一个 xml 文件中包含一个文件并使用它。如果您的软件从 xml 获取配置文件但没有任何方法来分离配置，如 apache/ngnix(nginx.conf - site-av
json - 如何反序列化包含具有更多 JSON 的字符串的 JSON？
我有一个 JSON 对象，其中包含一个本身是 JSON 对象的字符串。我如何反序列化它？我希望能够做类似的事情: #[derive(Deserialize)] struct B { c: S
json - Play Json 读取嵌套泛型序列化 Json
考虑以下 JSON { "a": "{\"b\": 12, \"c\": \"test\"}" } 我想定义一个泛型读取 Reads[Outer[T]]对于这种序列化的 Json import
json - 从 JSON 模式生成示例 JSON
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 11 个月前关闭。 Improve
json - DynamoDB JSON 还是标准 JSON？
我的旧项目在 MySQL 中有 Standard JSON 格式的数据。对于我在 JS (Node.js) 和 DynamoDB 中的全新项目，关于 Standard JSON格式: 是否建议将其转
json - JSON 值是有效的 JSON 吗？
JSON 值字符串、数字、true、false、null 是否是有效的 JSON？即，是 true 一个有效的 JSON 文档？还是必须是数组/对象？一些验证器接受这个(例如 http://jso
json - 如何编码嵌入在 JSON 中的 JSON
我有一个 JSON 字符串，其中一个字段是文本字段。这个文本字段可以包含用户在 UI 中输入的文本，如果他们输入的文本是 JSON 文本，也许是为了说明一些编码，我需要对他们的文本进行编码，以便它不会
json - 使用加号序列化 JSON 会导致无效的 JSON
我正在通过 IBM MQ 调用处理数据，当由 ColdFusion 10 (10,0,11,285437) 序列化时，0 将作为 +0.0 返回，它会导致无效的 JSON并且无法反序列化。 stPol
json - 在 json 中没有嵌套数组的情况下哈希到 json
我正在从三个数组中生成一个散列，然后尝试构建一个 json。我通过 json object has array 成功了。 require 'json' A = [['A1', 'A2', 'A3'],
json - 根据 JSON 中的字段有条件地解码 JSON
我从 API 接收 JSON，响应可以是 30 种类型之一。每种类型都有一组唯一的字段，但所有响应都有一个字段 type 说明它是哪种类型。我的方法是使用serde .我为每种响应类型创建一个结构并
json - 为什么我下载的 JSON 文件不再是 JSON？
我正在下载一个 JSON 文件，我已将其检查为带有“https://jsonlint.com”的有效 JSON 到文档目录。然后我打开文件并再次检查，结果显示为无效的 JSON。这怎么可能？？？？这是
json - 尝试解析 JSON 并创建提取的 JSON
我正在尝试根据从 API 接收到的数据动态创建一个 JSON 对象。收到的示例数据:将数据解码到下面给出的 CiItems 结构中 { "class_name": "test", "
json - 从 JSON 字符串值解析 JSON
我想从字符串转换为对象。来自 {"key1": "{\n \"key2\": \"value2\",\n \"key3\": {\n \"key4\": \"value4\"\n }\n
json - 将扁平化的 json 转换为嵌套的 json
目前我正在使用以下代码将嵌套的 json 转换为扁平化的 json: import ( "fmt" "github.com/nytlabs/gojsonexplode" ) func
json - Go:用一组 json 标签解码 json，并编码为另一组不同的 json 标签
我有一个使用来自第三方 API 的数据的应用程序。我需要将 json 解码为一个结构，这需要该结构具有“传入”json 字段的 json 标签。传出的 json 字段具有不同的命名约定，因此我需要不同
json - 将 JSON 值限制为其他 JSON 对象的名称
我想使用 JSON 架构来验证某些值。我有两个对象，称它们为 trackedItems 和 trackedItemGroups。 trackedItemGroups 是组名称和 trackedItem
json - Spark JSON 将 JSON 中完整的字段读取到案例类中
考虑以下案例类模式， case class Y (a: String, b: String) case class X (dummy: String, b: Y) 字段b是可选的，我的一些数据集没有字
json - 如何从 json 对象中获取格式化的 json 字符串？
我正在存储 cat ~/path/to/file/blah | 的输出jq tojson 在一个变量中，稍后在带有 JSON 内容的 curl POST 中使用。它运作良好，但它删除了所有换行符。我知

首页

博学

6Ren·AI

商城

json - 如何在 D3 中正确加载本地 JSON？