Question

我正在尝试从github gist（美国地图）https://gist.github.com/4431123重现此示例所需文件“us.json”我已复制到我的主目录。

此网站上存在类似问题already appeared。

<!-- 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支持跨源请求。

所以我尝试使用网络。

XMLHttpRequest无法加载https://gist.github.com/raw/4090846/b8c888f35c42400a080ab03c31a7649e0b9bc9a8/us.json。 Access-Control-Allow-Origin不允许使用null。

搜索在StackOverflow上向我提出了这个问题，表明这是Chrome试图将我从自己身上拯救出来。

Answer 1

您正在运行same origin policy，它只允许使用相同的协议将来自页面的AJAX调用发送到同一主机和端口。要解决这个问题，您可以在使用Python的目录中运行Web服务器：

$ python -m SimpleHTTPServer 8080

您现在可以在网络浏览器中http://localhost:8080访问您的网页，现在可以使用AJAX调用。

安全问题在家里复制d3.js的例子

1 个答案: