4

海

我正在尝试使用 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 应该有节点。

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

4

2 回答 2

5

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

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

这意味着您希望json.coordinates数组中的每个元素都有一个路径元素。由于您的测试数据是一个多边形，这意味着外环的一个路径元素，然后可能是任何内部孔的多个其他路径元素，如果您的数据有它们。我希望您只需要整个多边形的单个路径元素。

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

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

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

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

于 2013-05-13T04:05:55.673 回答
1

你真的需要用 D3 来做吗？

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

Leaflet 矢量图层支持 GeoJSON 并且它的大小非常紧凑。

开放层也是一种选择，但它的大小相当大。

这是我如何使用 Leaflet + GeoJSON 显示郊区形状的示例http://www.geolocation.ws/s/6798/en

于 2013-05-13T03:41:48.703 回答