使用 D3 制作交互式设备地图
Posted
技术标签:
【中文标题】使用 D3 制作交互式设备地图【英文标题】:Making an interactive device map using D3 【发布时间】:2014-11-11 16:23:34 【问题描述】:因此,我们有一个用于管理众多客户设备上的设备/软件的网络应用程序。我们最近提出了一个可视化表示这些客户网络的想法。以下是层次结构的概念:
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】:我可能会选择由 D3 的cluster layout 制作的dendrogram。任何 D3 可视化都可以应用缩放行为like this,所以这不是真正的考虑因素。
【讨论】:
有趣,感谢您的链接。您是否知道任何显示集群节点如何可拖动的示例?编辑:不使用力图。 我一直在寻找链接在拖动时不会消失的链接,但我想这并不是什么大问题。谢谢。 该功能很容易删除。不幸的是,该示例没有行号,但在拖动时隐藏链接的部分以注释// if nodes has children, remove the links and nodes
开头以上是关于使用 D3 制作交互式设备地图的主要内容,如果未能解决你的问题,请参考以下文章