如何使用javascript d3打开json文件？

编程入门行业动态更新时间:2024-10-26 04:29:15

本文介绍了如何使用javascript d3打开json文件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

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

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.

这是我的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "www.w3/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>D3 Tutorial</title> <script src="d3js/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

推荐答案

d3.json意味着加载数据通过HTTP。如@Quentin所说，您可以设置本地服务器以通过HTTP服务数据。

d3.json is meant to load data through HTTP. As @Quentin said, you can set up a local server to serve the data over HTTP.

对于像这样的开发，我使用firefox，似乎更容易来到本地交叉起点请求比铬。或者，您可以使用 tributary.io/

For development like this I use firefox, it seems to be more permissive when it comes to local cross origin requests than chrome. Alternatively you can use tributary.io/