D3.js svg地图不会与d3&；一起显示；geoJSON

我正在尝试用d3创建一个动态地图。我将一个shapefile转换为geoJSON，然后尝试创建一个svg图像，并使用d3绑定我的geoJSON数据。在我的页面上可以看到的只是一个空白或白色的svg图像（700 x 700）。我如何展示地图？代码如下所示：

$(function() {

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

d3.json("nysd.geojson", function(data) {
  var group = canvas.selectAll("g")
    .data(data.features)
    .enter()
    .append("g")

  var projection = d3.geo.mercator().scale(5000).translate([0,1980]);
  var path = d3.geo.path().projection(projection);

  var areas = group.append("path")
      .attr("d", path)
      .attr("class", "area")
      .attr("fill", steelblue);
});

});

---

对于初学者来说，文件扩展名应该是json，而不是geojson。最有可能的情况是，缩放和转换不合适。有关如何适当居中和缩放的信息，请参见。