Question

我有以下代码，我试图制作一个不包括南极洲的世界地图。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>

    body {
      background-color: white;
    }
    svg {
      background-color: white;
    }

  </style>

</head>

<body>
  <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
  <script>
    var width = 960,
        height = 1160;

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

    d3.json("countries.json", function(error, world) {
      if (error) return console.error(error);
      console.log(world);
});

      svg.append("path")
          .datum(topojson.feature(world, world.objects.subunits))
          .attr("d", d3.geo.path().projection(d3.geo.mercator()));
    });
  </script>
</body>
</html>

当我尝试打开html页面时，没有出现任何内容，并且它给出的错误是：

Failed to load resource: net::ERR_FILE_NOT_FOUND

我正在关注Mike Bostock的教程，可以在这里找到：https://bost.ocks.org/mike/map/。我已经尝试了许多命令，并尝试使用相应的路径访问该文件。这些是我尝试的命令（使用它们的相应本地主机链接）：

python -m SimpleHTTPServer  
python3 -m http.server
npm install -g http-server
http-server -c-1

如果有人能告诉我我做错了什么就会很棒！我已经检查了我的代码一千次，老实说，我不知道我做错了什么。提前谢谢！

我现在尝试在firefox中打开文件，它给出的错误是：

TypeError: world.objects is undefined

Answer 1

@Gerardo Furtado是正确的。你需要将svg包装在d3.json调用中。这使用了uk.json，例如：

    d3.json("https://bost.ocks.org/mike/map/uk.json", function(error, world) {
    if (error) return console.error(error);
    console.log(world);

    svg.append("path")
    .datum(topojson.feature(world, world.objects.subunits))
    .attr("d", d3.geo.path().projection(d3.geo.mercator()));  
    });

当我将其插入您的代码时，我可以看到一张英国的小地图。

Answer 2

首先：制作地图时必须定义：地图的中心，比例和投影。（这个字的地图不需要中心）

第二：您的数据是geojson，您将其用作.topojson。总是尝试使用.topojson：

原始档案（geojson）： 561 Kb
转换后的文件（topoJSON）： 75 Kb

您可以在这里找到转换后的地图：

TopoJSON Word Map

这里有完整的代码：

<head>
  <meta charset="utf-8">
  <style>
    body {
      background-color: white;
    }
    svg {
      background-color: white;
    }
    .county {
        fill:#696;
        stroke:#666;
        stroke-width:1px;
    }
  </style>
</head>
<body>
  <!-- D3 Base -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
  <!-- TopoJSON Library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
  <script>
    var width = 960,
        height = 1160;

    var scal = (1 << 10) / 2 / Math.PI;     //<-- Scale
    var projection = d3.geo.mercator().scale(scal).translate([width / 2, height / 2]);           //<-- Projection
    var center = projection(cent);
    var path = d3.geo.path().projection(projection);

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

    d3.json("word.topojson", function(error, world) {
      if (error) return console.error(error);

      var countries = topojson.feature(world, world.objects.collection);
      svg.selectAll("path")
          .data(countries.features)
        .enter()
          .append("path")
          .attr("class", "county")      //<-- Class to style your countries
          .attr("d", path);
    });
  </script>
</body>
</html>

多数民众赞成会给你这样的东西：

<强>推荐

Phyton SimpleHTTPServer，运行良好，但更好的选择更实用的东西。如果您使用的是Windows或XAMPP，请安装WAMP（如果您使用的是Linux）
尝试不同的浏览器，我发现Firefox上有SVG和数学的一些错误。总体投影数学和表示.-

无法使用JSON文件显示地图d3.js

2 个答案: