创建可扩展的多层系统图 [关闭]答案

【问题标题】：Creating an expandable multi-layer System Diagram [closed]创建可扩展的多层系统图 [关闭]
【发布时间】：2015-06-16 14:47:53
【问题描述】：

情况：我的公司拥有一个非常复杂且动态的 IT 基础架构。这些系统过于复杂，无法通过图表进行映射和呈现。我正在尝试创建一个集中的网站，其中包含所有 IT 团队的所有文档，并带有交互式可扩展系统图，以便团队可以根据需要向下钻取和查看尽可能多或尽可能少的系统，而不会不知所措。

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

注意：如果有歧义，我深表歉意。我不知道该怎么形容它。谷歌继续为所有查询提供不正确的结果。感谢所有帮助。

【问题讨论】：

这个问题让我着迷的是，一方面它获得如此少的浏览量（我的意思是 5 年多来可怜的 1000 次浏览量 - 在像 StackOverflow 这样的社区中，这意味着它实际上被忽略了）。但另一方面，所有那些拥有删除特权或投票特权的人并没有真正谴责它 - 2年后仍然没有被删除。因此，这里似乎有一些基本价值，它可以保持这种状态——如果没有什么特别的事情发生……就像有人在这里反复引起错误的恼怒关注。

【解决方案1】：

您正在寻找的东西绝对是可能的。我相信您应该寻找的搜索词是diagramming libraries 或graph drawing 和flow-charting 编程库。那里有很多库，包括商业库和开源库。更多选项请参见this related SO question。

根据您的描述，我相信yFiles for HTML diagramming library 应该是一个很好的匹配。

网上有两个演示，显示的场景似乎与您的描述相符：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：