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

Question

因此，我们有一个用于管理众多客户设备上的设备/软件的网络应用程序。我们最近提出了一个想法，用于对这些客户网络进行可视化表示。以下是层次结构的概念：

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

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

我的第一个想法是制作一个类似于此处显示的树形图：http: //bost.ocks.org/mike/treemap。它显示了网络的分布并允许缩放到特定部分。

我对你们的问题是，你们建议我为此走什么道路。树形图是正确使用的基础，还是应该从更简单的开始？你还有其他类似布局的例子吗？

Answer 1

我可能会在这里使用由 D3 的集群布局生成的树状图。任何 D3 可视化都可以像这样应用缩放行为，所以这不是真正的考虑因素。