创建可扩展的多层系统图

时间:2015-04-10 19:06:09

标签: javascript documentation dhtml system.diagnostics diagramming

情况:我的公司拥有大规模复杂且动态的IT基础架构。这些系统太复杂,无法通过图表进行映射和呈现。我正在尝试使用交互式可扩展系统图创建一个包含所有IT团队所有文档的集中式网站,以便团队可以向下钻取并查看尽可能多的系统,或者根据需要查看系统,而不会被淹没。

问题:使用DHTML,是否可以创建一个交互式图表,该图表以系统名称的简单方块开头,然后一旦用户点击它,该方块就会消失并展开以显示更多的系统组件?然后,每个组件都可以单击,并且该过程将继续,直到系统完全崩溃。

注意:如果这是不明确的,我道歉。我不知道如何描述它。谷歌继续向所有查询提取不正确的结果。所有帮助表示赞赏。

3 个答案:

答案 0 :(得分:2)

您正在寻找的是绝对可能的。我相信您应该寻找的搜索字词是diagramming librariesgraph drawingflow-charting编程库。那里有很多图书馆,包括商业图书馆和开源图书馆。有关多种选项,请参阅this related SO question

根据您的描述,我认为yFiles for HTML diagramming library应该是一个很好的匹配。

在线提供了两个演示,可以显示与您的描述相符的方案:

Live Demo Hierarchic Grouping

Live Demo Collapsible Tree

由于这是一个带有huge API的库,因此您可以根据自己的特定要求轻松自定义外观和数据源。

披露:我为创建该(商业)图书馆的公司工作,但我不代表我的雇主。这是我自己的帖子和意见。

答案 1 :(得分:1)

我不确定我是否理解你的问题。但似乎你正在寻找树图。 D3中有example

答案 2 :(得分:1)

是的,这是可能的,但可能的设计有很多选择,因此更具体的建议不会是明确的。客户端和服务器之间的关注点分布(谁在何时/用户操作时计算原理图的哪一部分)应该是合理的第一个设计选择。进一步的标准包括可视化复杂性,数据复杂性,数据源,数据变化频率,易于开发,可用的开发技能和预算。

今天的用户代理和计算能力允许在仅客户端和仅服务器处理之间运行整个范围(几乎就是:基本用户输入['鼠标点击']当然将在客户端处理)。

最简单的方法可能是在预先计算的数据集上使用像D3.js这样的客户端库,如@MárioAreias建议的那样。