使用OpenStreetMap Geojson中的d3js绘制地图

Question

海兰

我正在尝试使用来自geoj​​son的d3.v3.js绘制svg。我从openstreetmap（我的测试数据：http ://pastebin.com/4GQne42i）中获取geojson，然后尝试将其呈现为svg。

我的JS代码：

var path, vis, xy, jdata;

    xy = d3.geo.mercator().translate([0, 0]).scale(200);

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

    vis = d3.select("body").append("svg").attr("width", 960).attr("height", 600);

    //22.json is the name of the file which contains the geojson data
    d3.json("22.json", function(error, json) { 
      jdata = json;
      if(error!=null)
    console.log(error);
      return vis.append("svg:g")
          .selectAll("path")
          .data(json.coordinates)
          .enter().append("path")
          .attr("d", path);
    });

而我的svg结果是这样的：

<svg width="960" height="600">
 <g>
  <path></path>
 </g>
</svg>

我知道投影效果不好，但是我认为svg应该有节点。

我的代码有什么问题？您会发布正确的解决方案吗？

Answer 1

第一个问题是您的数据联接：

vis.append("g")
  .selectAll("path")
    .data(json.coordinates)
  .enter().append("path")
    .attr("d", path);

这意味着您要为json.coordinates数组中的每个元素分配一个路径元素。由于您的测试数据是多边形，因此如果您的数据包含多边形，那将意味着一个外圈的路径元素，然后可能是任何内部孔的多个其他路径元素。我希望您只需要一个用于整个多边形的路径元素。

第二个问题是您没有将有效的GeoJSON传递给d3.geo.path实例。由于数据联接中的数据为json.coordinates，因此您只需要将一个坐标数组直接传递给path，当您需要传递GeoJSON几何对象或要素时。（请参阅GeoJSON规范。）

幸运的是，通过消除数据联接并渲染整个多边形，可以轻松解决这两个问题。要仅添加一个path元素，只需调用selection.append：

vis.append("path")
    .datum(json)
    .attr("d", path);

您的投影可能也需要调整（平移和缩放）。您可能会发现此处的项目到边界框示例很有用。