d3.js - 使用来自 openstreetmap geojson 的 d3js 绘制 map

Question

海

我正在尝试使用 geojson 中的 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

第一个问题是您的 data join :

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 specification。)

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

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

您的投影可能也需要调整(平移和缩放)。您可能会找到 project to bounding box example在这里很有用。