Question

我一直在使用来自mbostocks github帐户的D3和TopoJSON的示例我一直在做的D3和topoJSON工作没有出现在browwer或本地nodejs http-server中。我刚刚从mbostocks github复制和粘贴的例子也没有出现。这个例子如下。现在我很困惑为什么它没有出现在broswer中。我在文件中有脚本src以及所需的html样板。如果有人可以请告诉我为什么它没有运行那将是伟大的。我刚刚开始使用D3和topoJSON。谢谢！

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <style>

      .states {
        fill: none;
        stroke: #fff;
        stroke-linejoin: round;
      }

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

      var width = 960,
          height = 500;

      var fill = d3.scale.log()
          .domain([10, 500])
          .range(["brown", "steelblue"]);

      var path = d3.geo.path();

      var svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height);

      d3.json("/mbostock/raw/4090846/us.json", function(error, us) {
        svg.append("g")
            .attr("class", "counties")
          .selectAll("path")
            .data(topojson.feature(us, us.objects.counties).features)
          .enter().append("path")
            .attr("d", path)
            .style("fill", function(d) { return fill(path.area(d)); });

        svg.append("path")
            .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
            .attr("class", "states")
            .attr("d", path);
      });

      </script>
  </body>

</html>

Answer 1

你不应该在本地运行它。总是最好从httpserver运行它。我已将您的示例复制到Plunker：http://plnkr.co/edit/xojc5C7RcBpQehQBdLc1?p=preview并且它正常工作。我唯一改变的是d3.json函数中使用的URL，并制作了数据文件us.json的副本。现在它引用了一个本地文件/mbostock/raw/4090846/us.json，我猜你在你正在使用的位置/主机上没有。该示例在http://bl.ocks.org/上运行，因此实际文件网址为http://bl.ocks.org/mbostock/raw/4090846/us.json。但由于浏览器中的跨源策略，您无法在页面上使用该URL。

所以你必须要做的是访问网址：http://bl.ocks.org/mbostock/raw/4090846/us.json并将该文件保存为us.json与index.html所在的目录。然后将功能d3.json()中的网址更改为us.json，就像我在Plunker中所做的那样。亲眼看看，该代码没有任何问题。我猜这个脚本根本找不到JSON文件所以它不会绘制任何东西，因为它没有数据可以绘制。您可以在控制台窗口中看到它应该抛出错误：“GET http://yourhost/mbostock/raw/4090846/us.json 404（Not Found）”

BTW：Plunker还有一个下载按钮，因此它将压缩的zip文件中的Plunker中使用的所有文件下载。你也可以使用它。祝你好运！

D3和TopoJSON不会在浏览器中加载

1 个答案: