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

Question

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

我读过如何创建可缩放的Geo http://bl.ocks.org/mbostock/2206590的示例，但是在代码中，它使用了美国各州的TopoJSON (或GeoJSON)格式。

如何获得学校大楼的GeoJSON文件？

谢谢拉杰。

Answer 1

硬核测井

有一些在线的geojson编辑器，比如geojson.io。您可以找到您的建筑，映射它，添加属性这样的房间名称，然后将其保存为geojson或topojson文件。

​

​

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

在您的D3js代码中，您必须自动聚焦于json数据(形状)。一个方便的工作示例是在答案的下半部分、D3js call和Focus部分中解释的。

机智SVG

使用Inkscape或其他向量编辑器将您的建筑设计为SVG / XML文件可能需要更长的时间，但最终会得到更好的结果。然后使用d3.xml(http://yourwebsite.org/file.xml, function(data){ ... })。不幸的是，我在这个方向上的专业知识太少了，但如果在这个层次上要求质量，我就会这么做。