Создание расширяемой многослойной системной диаграммы

Question

СИТУАЦИЯ: У моей компании обширная и динамичная ИТ-инфраструктура. Эти системы слишком сложны, чтобы отображать и представлять через диаграмму. Я пытаюсь создать централизованный веб-сайт, на котором размещается вся документация для всех ИТ-групп, с интерактивными расширяемыми системными диаграммами, чтобы команды могли развернуть и просмотреть столько, сколько потребуется, без какой-либо системы, без необходимости перегружать.

ВОПРОС: Использование DHTML, можно создать интерактивную схему, которая начинается как простой квадрат с именем системы, то, как только щелчки пользователей на нем, что квадрат исчезает и расширяется, чтобы показать больше систем компоненты? Затем каждый компонент будет доступен для клики, и процесс будет продолжаться до тех пор, пока система не будет полностью разрушена.

ПРИМЕЧАНИЕ: Приносим извинения, если это неоднозначно. Я не знал, как еще это описать. Google продолжает выводить неверные результаты по всем запросам. Вся помощь приветствуется.

Answer 1

Возможно, что вы ищите. Я считаю, что поисковые запросы, которые вы должны искать, это diagramming libraries или graph drawing и flow-charting библиотеки программирования. Там много библиотек, как коммерческих, так и open-source. См. this related SO question для нескольких вариантов.

Из вашего описания, я считаю, что yFiles for HTML diagramming library должно быть хорошим совпадением.

Есть два демо доступны в Интернете, которые показывают сценарии, которые, кажется, чтобы соответствовать вашему описанию:

Live Demo Hierarchic Grouping

Live Demo Collapsible Tree

Поскольку это библиотека с huge API вы можете легко настроить внешний вид и а также источники данных в соответствии с вашими конкретными требованиями.

Disclosure: Я работаю в компании, которая создает эту (коммерческую) библиотеку, однако я не представляю здесь своего работодателя. Это мой собственный пост и мнение.

Answer 2

Я не уверен, правильно ли я понял ваш вопрос. Но, похоже, вы ищете древовидную диаграмму. В D3 есть example.

Answer 3

Да, это возможно, но есть много вариантов возможных конструкций, поэтому более конкретные предложения не будут окончательными. Распределение проблем между клиентом и сервером (кто вычисляет, какая часть схем в какое время/по каким действиям пользователя) должен быть разумным первым выбором дизайна. Дополнительные критерии включают сложность визуализации, сложность данных, источник данных, частоту изменения данных, простоту разработки, доступные навыки разработки и бюджет.

Сегодняшние пользовательские агенты и вычислительная мощность позволяют запускать всю гамму между клиентской и серверной обработкой (почти то есть: основной пользовательский ввод [«щелчки мыши»], конечно, будет обработан на стороне клиента).

Простейший путь, вероятно, будет использовать библиотеку на стороне клиента, такую ​​как D3.js, в предварительно вычисленном наборе данных, как предлагает @ MárioAreias.