Knockout.js 使用D3制作交互式设备地图

因此，我们有一个web应用程序，用于管理众多客户设备上的设备/软件。我们最近提出了一个想法，可以直观地表示这些客户网络。下面是层次结构的大致情况：

customer
    location1
        router1
            10 devices
        router2
            15 devices
    location2
        router3
            200 devices
        router4
            200 devices
        router5
            50 devices

建议的想法是对该层次结构进行可视化，客户可以单击location1放大该层次结构，并查看他们的两个路由设备等。然后，他们可以打开“层”，这将使用箭头显示设备之间的编解码器连接等内容。这将首先用于查看他们的网络是如何布局的，设置网络的各个部分，以及调试网络中的路由等

我的第一个想法是制作一个类似于此处显示的树状图：。它显示网络的分布，并允许缩放到特定部分

---

我想问你们的是，你们建议我走哪条路。树形图是正确的使用基础，还是应该从更简单的东西开始？有没有其他类似布局的例子可以给我指点？

我可能会选择D3公司生产的。任何D3可视化都可以应用缩放行为，因此这不是真正需要考虑的问题。

很有趣，谢谢链接。您是否知道任何显示集群节点如何可拖动的示例？编辑：不使用力图。我正在寻找一个链接不会在拖动时消失的图，但我想这不是什么大问题。谢谢。这个功能很容易删除。不幸的是，该示例没有行号，但在拖动时隐藏链接的部分以注释

//开始。如果节点有子节点，请删除链接和节点