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

Question

我一直在使用来自 mbostocks github 帐户的 D3 和 TopoJSON 示例我一直在做的 D3 和 topoJSON 工作也没有出现在浏览器或本地 nodejs http-server 中。我刚刚从mbostocksgithub复制粘贴的例子也没有出现。这个例子如下。现在我很困惑为什么它没有出现在浏览器中。我在文件中有脚本 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，我猜你在使用的 location/host 上没有。 http://bl.ocks.org/ 上的示例运行s 所以实际文件 url 是 http://bl.ocks.org/mbostock/raw/4090846/us.json。但是由于浏览器中的跨源策略，您不能在页面上使用 URL。

所以你必须做的是访问 url: http://bl.ocks.org/mbostock/raw/4090846/us.json and save that file as us.json in the same directory as where your index.html resides. Then change the URL in function d3.json() to us.json like i did in the Plunker. See for yourself, there is nothing wrong with that code. I'm guessing the script simply can't find the JSON file so it won't draw anything since it has no data to draw. You can see that in your console window, it should throw an error: "GET http://yourhost/mbostock/raw/4090846/us.json 404（未找到）"

顺便说一句：Plunker 也有一个下载按钮，所以它会以压缩 zip 文件的形式下载该 Plunker 中使用的所有文件。你也可以用那个。祝你好运！

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

D3 and TopoJSON will not load in browser

html

javascript

geojson

d3.js

topojson

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

D3 and TopoJSON will not load in browser

html

javascript

geojson

d3.js

topojson

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