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

时间:2014-11-11 16:23:35

标签: knockout.js d3.js device-manager

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

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。它显示了网络的分布,并允许缩放到特定部分。

我向你们提出的问题是你们建议我为此做些什么。树图是否是正确的基础,或者我应该从更简单的东西开始?你可以指点我有类似布局的其他例子吗?

1 个答案:

答案 0 :(得分:1)

我可能会使用D3 dendrogram生成的cluster layout。任何D3可视化都可以应用缩放行为like this,因此这不是真正的考虑因素。