D3 地图未呈现澳大利亚 topojson 文件答案

【问题标题】：D3 Map not rendering Australian topojson fileD3 地图未呈现澳大利亚 topojson 文件
【发布时间】：2016-11-14 12:15:43
【问题描述】：

我有一个 d3 地图未呈现我创建的澳大利亚 TopoJSON 文件的 JSON 文件。

相同的代码可以很好地呈现美国地图。浏览器检查器中没有错误，并且两张地图都可以在 geojson.io 等在线可视化网站上正常呈现。

我提供了指向 JSON 的链接。

Australian TopoJSON 不适用于我的代码（但适用于 geojson.io/#map=4/-27.97/125.22）
American TopoJSON 可以使用我的代码

<html>

<head>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="http://d3js.org/topojson.v1.min.js"></script>
  <style>
    path {
      fill: #ccc;
    }
  </style>
</head>

<body>
  <h1>topojson simplified Australia</h1>
  <script>
    var width = window.innerWidth,
      height = window.innerHeight;

    var path = d3.geo.path();

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

    d3.json("topo-australia-simplified.json", function(error, topology) {
      if (error) throw error;

      svg.selectAll("path")
        .data(topojson.feature(topology, topology.objects.australia).features)
        .enter().append("path")
        .attr("d", path);
    });
  </script>


</body>

</html>

【问题讨论】：

标签： d3.js topojson

【解决方案1】：

问题是你正在使用：

var path = d3.geo.path();

你还没有给出投影：

var projection = d3.geo.mercator()
  .scale(500)//scale it up as per your choice.
  .translate([-900,0]);//translate as it was scaled up.

var path = d3.geo.path()
  .projection(projection);

工作代码here

【讨论】：

谢谢！你知道为什么我可以在没有投影的情况下渲染美国地图吗？
原因是当你做d3.geo.path();时，投影是空的。（对于美国的情况）特征值是不需要缩放的，所以不需要翻译它。我还编辑了我的答案，希望它能更好地解释。