javascript - D3 和 TopoJSON 将不会在浏览器中加载-6ren

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

转载作者：行者123 更新时间：2023-12-02 16:33:24

我一直在使用 mbostocks github 帐户中的 D3 和 TopoJSON 示例。我一直在做的 D3 和 topoJSON 工作也没有出现在浏览器或本地 Nodejs http 服务器中。我刚刚从 mbostocks github 复制并粘贴的示例也没有出现。这个例子如下。现在我很困惑为什么它没有出现在浏览器中。我在文件中有脚本 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>

最佳答案

您不应该在本地运行它。最好总是从 httpserver 运行它。我已将您的示例复制到 Plunker:http://plnkr.co/edit/xojc5C7RcBpQehQBdLc1?p=preview它确实有效。我唯一更改的是 d3.json 函数中使用的 URL，并复制了数据文件 us.json。现在它引用了一个本地文件 /mbostock/raw/4090846/us.json 我猜您正在使用的位置/主机上没有该文件。该示例在 http://bl.ocks.org/ 上运行，因此实际文件 URL 为 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() 中的 URL 更改为 us.json，就像我在 Plunker 中所做的那样。你自己看看，这段代码没有任何问题。我猜脚本根本找不到 JSON 文件，因此它不会绘制任何内容，因为它没有要绘制的数据。您可以看到在控制台窗口中，它应该抛出错误:“GET http://yourhost/mbostock/raw/4090846/us.json 404(未找到)”

顺便说一句:Plunker 还有一个下载按钮，因此它可以将 Plunker 中使用的所有文件下载到压缩的 zip 文件中。你也可以用它。祝你好运!

关于javascript - D3 和 TopoJSON 将不会在浏览器中加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28119021/