d3.js - svg 地图不会使用 d3 和 geoJSON 显示

Question

我正在尝试使用 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);
});

});