Vis.js — це динамічна бібліотека для візуалізації, заснована на браузері. Бібліотека призначена для простоти використання, обробки великих обсягів динамічних даних і дозволяє маніпулювати даними.
Примітка: Платформа LearnReactUI.dev надає підручники та вихідний код для синіх прикладів, що зображені на малюнку нижче. Для більш складних прикладів ви можете звернутися до мене через цю сторінку. Також перейдіть за цим посиланням для доступу до прикладів на інші теми.
Vis.js KnowledgeMap посилання надає доступ до всіх прикладів, що зображені на малюнку нижче.
https://onurdayibasi.dev/react-vis-network-knowledge-map
Basic
Я спробував цей приклад, щоб зрозуміти, як мережеві діаграми хмарних сервісів та їх зв'язки реагують на міграції, такі як перетягування та скидання.
Basic2
У другому прикладі я створюю мережеву діаграму з найпростішими вузлами, оскільки я буду налаштовувати мережеві вузли відповідно до потреб проекту. Моя мета — налаштувати ці вузли відповідно до своїх власних потреб у майбутньому.
Basic3
У цьому прикладі я дозволяю Vis.JS рендерити згідно з іконками AWS та мережею, яку я хочу створити. У цьому прикладі я грався з кольорами та жирністю вузлів і з’єднань, щоб надати користувачу більше інформації про мережу.
Hierarchical
Я малюю ту саму мережеву діаграму ієрархічно з верхнього до нижнього рівня.
Horizontal
Я малюю ту саму мережеву діаграму ієрархічно зліва направо.
Selection
У цьому прикладі, коли ми робимо вибір, ми збільшуємо товщину межі вузла та з’єднань, які ми вибираємо. Це робить вибраний вузол більш помітним.
Selection2
У цьому прикладі, коли ми робимо вибір, ми збільшуємо товщину межі вузла та з’єднань, які ми вибираємо. Це робить вибраний вузол більш помітним.
Neighbourhood Highlight
Тут ми використовуємо інший метод, щоб зробити те, що вибрано, більш помітним. Ми зменшуємо прозорість об'єктів за межами вибору. Це створює ефект підсвічування вибраного.
Neighbourhood Highlight 2
Тут ми використовуємо інший метод, щоб зробити те, що вибрано, більш помітним. Ми зменшуємо прозорість об'єктів за межами вибору. Це створює ефект підсвічування вибраного.
Перекладено з: React Vis.js Examples