3

我正在尝试使用 javascript 从 JSON 文件中提取元素，但是我收到一条错误消息，指出它无法加载 JSON 文件。

这就是我的代码的样子：

<!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>

这是控制台吐出的错误：

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
4

3 回答 3

4

d3.json 旨在通过 HTTP 加载数据。正如@Quentin 所说，您可以设置本地服务器以通过 HTTP 提供数据。

对于像这样的开发，我使用 Firefox，在涉及本地跨源请求时，它似乎比 chrome 更宽松。或者，您可以使用http://tributary.io/

您的代码示例： http: //tributary.io/inlet/5776228

于 2013-06-13T18:40:58.590 回答
1

仅 HTTP 支持跨源请求。

通过 HTTP 加载站点。如果需要，请安装 Web 服务器（例如 Apache HTTPD 或 Lighttpd）。

于 2013-06-13T18:34:05.990 回答
0

除了安装 Web 服务器或使用 3rd 方在线环境，您还可以使用不同的代码编辑器 - Brackets。它提供称为“实时预览”的功能。我只是用类似的代码遇到了同样的错误Uncaught XMLHttpRequest，可以确认代码在括号中完美运行。

Brackets 直接与您的浏览器配合使用，以即时推送代码编辑，因此您的浏览器预览在您编码时始终是最新的——无需重新加载页面。为了不影响您当前的网络浏览，Brackets Live Preview 会使用单独的 Chrome 配置文件打开一个额外的 Chrome 副本。// 从如何使用括号

于 2017-02-20T19:25:32.273 回答