5

次のコードを実行しているとき:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Demo: GeoJSON</title>
        <script type="text/javascript" src="http://localhost/webserver/d3/d3.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>
        <script type="text/javascript">

            //Width and height
            var w = 500;
            var h = 300;

            //Define default path generator
            var path = d3.geo.path();

            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            //Load in GeoJSON data
            d3.json("http://localhost/webserver/us-states.json", function(json) {

                //Bind data and create one path per GeoJSON feature
                svg.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path);

            });

        </script>
    </body>
</html>

次のエラーが表示されます。

XMLHttpRequest cannot load http://localhost/webserver/us-states.json. Origin null is not allowed by Access-Control-Allow-Origin.

ここで何が問題になっていますか?どうすれば解決できますか? 私は Scott Murray の本に従っていますが、json を使い始めるまで、Web サーバー上のファイルにアクセスするのに問題はありませんでした。

4

2 に答える 2