Javascript 创建可扩展的多层系统图

情况：我的公司有一个非常复杂和动态的IT基础架构。这些系统过于复杂，无法通过图表进行映射和显示。我正在尝试创建一个集中的网站，为所有IT团队提供所有文档，并提供交互式可扩展系统图，这样团队就可以深入查看所需的系统，而不会不知所措

问题：使用DHTML，是否可以创建一个交互式图表，该图表以一个简单的正方形开头，带有系统名称，然后一旦用户单击它，该正方形就会消失并展开以显示更多的系统组件？然后，可以单击每个组件，该过程将继续，直到系统完全崩溃

---

注意：如果这不明确，我深表歉意。我不知道该怎么形容它。谷歌继续在所有查询中显示不正确的结果。感谢所有的帮助

我不确定我是否正确理解了你的问题。但你似乎在寻找一个树形图。D3里有这个

是的，这是可能的，但可能的设计有很多选择，因此更具体的建议将不确定。客户机和服务器之间的关注点分布（谁在什么时间/在什么用户操作时计算示意图的哪一部分）应该是合理的第一个设计选择。进一步的标准包括可视化复杂性、数据复杂性、数据源、数据更改频率、开发难度、可用开发技能和预算

今天的用户代理和计算能力允许运行纯客户端和纯服务器处理之间的整个范围（几乎就是说：基本用户输入[‘鼠标点击’]当然将在客户端进行处理）

---

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

您所寻找的肯定是可能的。我认为您应该查找的搜索词是

图表库

或

图形绘制

和

流程图

编程库。有很多图书馆，包括商业图书馆和开源图书馆。有关许多选项，请参见

从你的描述来看，我相信这应该是一个很好的匹配

有两个在线演示可用于显示与您的描述相匹配的场景：

由于这是一个具有的库，您可以轻松地根据自己的特定需求自定义外观和感觉以及数据源

---

披露：我为创建（商业）图书馆的公司工作，但我在这里不代表我的雇主。这是我自己的帖子和观点。

这个问题让我着迷的是，一方面，它的浏览量如此之少（我的意思是，在5年多的时间里，它的浏览量达到了可怜的1000次——在StackOverflow这样的社区，这意味着它几乎被忽视了），这两者之间形成了鲜明的对比。但另一方面，所有那些拥有删除特权或投票特权的人并没有真正谴责它——两年后它仍然没有被删除。所以，这里似乎有一些基本的价值，它可以保持这样-如果没有什么特别的事情发生。。。就像有人在这里反复引起错误的恼怒的注意。