Javascript D3可缩放树映射-加载新级别异步？

在这个树映射示例中，整个JSON树从一开始就存在：

由于我有一个非常大的数据集，我希望在单击时加载每个级别： 在示例中单击“国际关系”应该从远程数据源加载子数组，然后布局矩形

因此，从一个层面开始：

var json = {
    "name": "Sitemap",
    "children": [{
        "name": "International Relations",
        "value" : 700
    }]
}

然后在重新计算布局之前向树中添加更多数据：

var json = {
    "name": "Sitemap",
    "children": [{
        "name": "International Relations",
        "children": [{
            "name": "Systemic Theory",
            "children": [{
                "name": "Great Powers",
                "value": 400,
            }, {
                "name": "Systemic Politics",
                "value": 300,
            }]
        }]
    }]
}

如何在保持其余功能完整的同时异步加载数据

---

理想情况下，这也适用于另一个方向：例如，如果用户直接导航到树形图的特定级别，然后开始向上移动层次结构。

请创建一个JSFIDLE，我可能会提供帮助。谢谢你做了你所缺少的一切……@MarkBenny：再加上小提琴，谢谢！