Question

Hy

我正在尝试使用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，因此当您需要传递GeoJSON几何对象或要素时，您只需将坐标数组直接传递给path。（参见GeoJSON specification。）

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

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

您的预测也可能需要调整（翻译和缩放）。您可能会发现project to bounding box example在这里很有用。

Answer 2

你真的需要用D3吗？

我建议使用更多地图导向库，例如：

Leaflet矢量图层支持GeoJSON，其尺寸非常紧凑。

Open Layers也是一个选项，但它的大小非常大。

以下是我使用Leaflet + GeoJSON显示郊区形状http://www.geolocation.ws/s/6798/en

的示例

使用openstreetmap geojson中的d3js绘制地图

2 个答案: