如何使用javascript d3打开json文件？
[英]How do I open a json file using javascript d3?
问题描述
I'm trying to extract elements from a JSON file using javascript, however I'm getting an error saying it can not load the JSON file. 
我正在尝试使用JavaScript从JSON文件中提取元素，但是却收到一条错误消息，提示它无法加载JSON文件。
This is what my code looks like: 这是我的代码如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>D3 Tutorial</title>
<script src="http://d3js.org/d3.v3.min.js"> </script>
</head>
<body>
<script>
d3.json("mydata.json", function(data) {
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", function (d) { return d.age * 10;})
.attr("height", 48)
.attr("y", function (d,i) { return i * 50; })
.attr("fill", "blue");
})
</script>
</body>
</html>
This is the error the console is spitting out: 这是控制台吐出的错误：
XMLHttpRequest cannot load file:///C:/locationoffile..../mydata.json. Cross origin requests are only supported for HTTP. d3.v3.min.js:1
Uncaught TypeError: Cannot read property 'length' of null d3.v3.min.js:3
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 d3.v3.min.js:1
3 个解决方案
解决方案1
4 已采纳 2013-06-13 18:40:58
d3.json is meant to load data through HTTP. d3.json用于通过HTTP加载数据。 As @Quentin said, you can set up a local server to serve the data over HTTP. 正如@Quentin所说，您可以设置一个本地服务器来通过HTTP提供数据。
For development like this I use firefox, it seems to be more permissive when it comes to local cross origin requests than chrome. 对于这样的开发，我使用firefox，在本地跨源请求方面，似乎比chrome更宽容。 Alternatively you can use http://tributary.io/ 或者，您可以使用http://tributary.io/
Example with your code: http://tributary.io/inlet/5776228 您的代码示例： http : //tributary.io/inlet/5776228
解决方案2
1 2013-06-13 18:34:05
Cross origin requests are only supported for HTTP.
Load the site over HTTP. 通过HTTP加载站点。 Install a web server (such as Apache HTTPD or Lighttpd) if you need to. 如果需要，请安装Web服务器（例如Apache HTTPD或Lighttpd）。
解决方案3
0 2017-02-20 19:25:32
Alternatively to installing web server or using 3rd party online environments you can just use different code editor - Brackets . 除了安装Web服务器或使用第三方在线环境外，您还可以使用其他代码编辑器- 括号 。 It offers feature called "Live Preview". 它提供了称为“实时预览”的功能。 I just hit same error Uncaught XMLHttpRequest with similar code, can confirm code works perfectly in Brackets. 我只是用相似的代码遇到了相同的错误Uncaught XMLHttpRequest ，可以确认代码在Brackets中可以正常工作。
Brackets works directly with your browser to push code edits instantly, so your browser preview is always up to date while you're coding — no page reloads needed. 括号可直接与您的浏览器一起使用，以立即推送代码编辑，因此在编写代码时，浏览器预览始终是最新的-无需重新加载页面。 In order to keep your current web browsing unaffected, Brackets Live Preview opens an additional copy of Chrome using a separate Chrome profile. 为了不影响您当前的网络浏览，Brackets Live Preview使用单独的Chrome配置文件打开了另一个Chrome副本。 // From How to Use Brackets //从如何使用括号
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.