D3可视化以创建建筑/校园地图

Question

如何创建建筑/学校地图，我可以使用D3缩放并获取每个教室的上下文信息。

我已经阅读了如何创建Zoomable Geo Maps http://bl.ocks.org/mbostock/2206590的示例，但在代码中，它使用了美国各州的TopoJSON（或GeoJSON）格式。

如何获取校舍的GeoJSON文件？

谢谢， 拉吉。

Answer 1

硬核geojson

有在线geojson编辑器，例如geojson.io。您可以找到您的建筑物，绘制地图，添加房间名称等属性，然后将其另存为geojson或topojson文件。

请注意，geojson.io不允许无限缩放，因此您的绘图可能非常接近。

在D3js代码中，您必须自动对焦于json数据（形状）。在2nd half of this answer，D3js call和Focus部分中说明了一个方便的工作示例。

Witty SVG

使用Inkscape或其他一些矢量编辑器将您的建筑设计为SVG / XML文件需要更长的时间，但最终会产生更好的最终结果。然后使用d3.xml(http://yourwebsite.org/file.xml, function(data){ ... })。遗憾的是，我在这个方向上的专业知识太少了，但如果在那个级别要求质量，我就会采用这种方式。