2

この例を github gist (米国の地図) から再現しようとしています https://gist.github.com/4431123 必要なファイル「us.json」をホーム ディレクトリにコピーしました。

同様の問題がこのサイトですでに発生しています。

<!-- language: lang-html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  fill: none;
  stroke: steelblue;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>

var width = 960,
    height = 500;

var path = d3.geo.path();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
d3.json("us.json", function(error, us) {
  svg.append("path")
      .attr("d", topojson.object(us, us.objects.counties).geometries.map(function(d) {
        var bounds = path.bounds(d);
        return "M" + bounds[0]
            + "H" + bounds[1][0]
            + "V" + bounds[1][3]
            + "H" + bounds[0][0]
            + "Z";
      }).join(""));
});

</script>

私が得ているエラーメッセージは次のとおりです。

XMLHttpRequest は file:///C:/Users/work/Documents/d3js/us.json を読み込めません。クロス オリジン リクエストは、HTTP でのみサポートされています。

ということで、Webを使ってみました。

XMLHttpRequest はhttps://gist.github.com/raw/4090846/b8c888f35c42400a080ab03c31a7649e0b9bc9a8/us.jsonを読み込めません。Origin null は、Access-Control-Allow-Origin では許可されていません。

検索すると、StackOverflowに関するこの質問が表示され、Chrome が私を自分から救おうとしていることが示唆されます。

4

1 に答える 1

5

同じオリジンポリシーを実行しています。このポリシーでは、ページからのAJAX呼び出しのみが、同じプロトコルを使用して同じホストとポートに対して行われるようになっています。これを回避するには、Pythonを使用して作業しているディレクトリでWebサーバーを実行します。

$ python -m SimpleHTTPServer 8080

http://localhost:8080これで、Webブラウザでページにアクセスでき、AJAX呼び出しが機能するはずです。

于 2013-01-06T07:10:55.967 に答える