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 に答える