javascript - d3.js map 插图(缩放)

Question

我正在尝试使用 d3.js 绘制 map ，该 map 具有城市 map 的一部分偏移并绘制在不同的位置( map 插图)。有使用 d3.js 的工作示例吗？如果没有，我是否可以使用不同的 .json 文件，创建一个 DOM 元素，正常加载主 map ，然后加载插图的辅助数据？

最好有一个工作示例会有所帮助，但如果什么都不存在，我会尝试根据我的理解进行编辑。

Answer 1

我正在研究类似的任务，但尚未完成。我最初的想法是定义一个像 albersUsa 描述的复合投影 here 。您可以从 implementation 看到它是如何工作的。 - 它基本上定义了 (lon,lat) => (x,y) 的三种不同投影，然后根据源点的经纬度选择要使用的投影。

但我不确定这对于插图是否可以开箱即用，因为不同的投影会重叠 - 例如，从某个遥远的地方到插图城市的道路会上升到未放大的边缘城市，然后在放大 View 的边缘重新开始。因此，您需要自定义剪切，以便基本投影在放大的插入边界(在屏幕坐标中)的边缘处被剪切，而不是在(经度，纬度)坐标中的插入边界的边缘处被剪切。实际上， map 上有一个区域未渲染，因为它被展开的插图隐藏了。