Початок роботи - Візуалізація цифрових двійників

Ласкаво просимо! Цей вичерпний посібник допоможе вам швидко почати роботу з візуальним представленням Digital Twin для Power BI, що включає розширену навігацію, інтерактивну легенду, пропорційну ширину країв, розширені підказки, перехресну фільтрацію та можливості наскрізного перегляду.

📋 Комплексний огляд функцій

🔍 Покращена навігація ✨

Плавне масштабування та панорамування з плавною анімацією
Професійні елементи керування навігацією на екрані
Міні-карта в реальному часі з індикатором області перегляду
Розумний зворотний зв'язок з курсором (захоплення/захоплення)
Точність, подібна до CAD, для великих схем

🎨 Інтерактивна система легенд ✨

Динамічна легенда з фактичних кольорів вузлів
Клацніть елементи легенди, щоб виділити вузли
Працює з будь-яким категорійним полем
Інтеграція перехресної фільтрації
Відображення кількості вузлів за категоріями

Пропорційна ширина кромки ✨ Пропорційна ширина кромки ✨

Шкала товщини кромки з інтенсивністю потоку
Алгоритм нормалізації для кожного вузла
Миттєве виявлення вузьких місць
Увімкнення/вимкнення за допомогою панелі форматів
Контекстна візуалізація потоку

Покращені підказки ✨ Покращені підказки ✨

Гнучкі підказки вузла "Ключ: Значення" підказки для вузла "Ключ: Значення
Резервна система підказок для розумних країв
Багатофункціональна підтримка з назвами полів
Автоматична генерація етикеток
Зворотньо сумісний дизайн

Удосконалена перехресна фільтрація

Двонаправлена фільтрація за допомогою таблиць
Підсвічування окремих вузлів/ребер
Фільтрація категорій на основі легенди
Підтримка багаторазового вибору
Покращена модель даних з показниками

Інтеграція з Power BI

Контекстні меню, сумісні з AppSource
Широкі можливості наскрізного свердління
Впорядковані елементи керування панеллю форматів
Покращене керування краями за допомогою підгруп
Управління професійним відбором

Покращене налаштування та вимоги до даних

⚠️ Важливо: Всі дані повинні бути в одній таблиці з використанням UNION-структури з правильною обробкою NULL для оптимальної продуктивності.

Покращена структура моделі даних

- Покращена структура даних з усіма новими функціями ✨

ВИБІР 

    NodeId, 

    'Статус: Працює\nТип: Машина\nТемпература: 85°C\nЕфективність: 92%' як NodeTooltip,

    'Running' як LegendColor, - для інтерактивної легенди ✨.

    NULL як EdgeId, NULL як SourceId, NULL як TargetId, NULL як EdgeTooltip,

    Ефективність як NodeValue, - для перехресної фільтрації

    NULL як EdgeValue

FROM NodesTable

ОБ'ЄДНАТИ ВСІХ

ВИБІР 

    NULL як NodeId, NULL як NodeTooltip, NULL як LegendColor,

    EdgeId, SourceId, TargetId,

    'Тип: Потік матеріалу\nІнтенсивність: Висока\nТиск: 2.5 бар' як EdgeTooltip, - Розумні підказки ✨

    NULL як NodeValue,

    FlowIntensity як EdgeValue - перехресна фільтрація + пропорційна ширина ✨

FROM EdgesTable

Розширений довідник ролей даних

Поле	Тип	Статус	Опис	Приклад
Вміст SVG	Вимірювання	✅ Обов'язково	SVG-розмітка, що містить цифрову діаграму-близнюка	....
NodeId	Категорія	✅ Обов'язково	Унікальний ідентифікатор для кожного вузла	M1001, B1201, T1101
Підказка про вузол	Категорія	✨ Покращений	"Ключ: Значення" багаторядковий формат підказки	Статус: Працює\nТип: Машина\nЕфективність: 92%
Колір легенди (необов'язково)	Категорія	Новий!	Категоріальне поле для інтерактивної генерації легенди	Запуск, обслуговування, автономний режим
Значення вузла	Вимірювання	Покращено	Бізнес-метрики для вузлів перехресної фільтрації	85.4, 92.1, 79.8
EdgeId	Категорія	❌ Необов'язково	Унікальний ідентифікатор для кожного ребра	E1001, E1002
SourceId	Категорія	❌ Необов'язково	Вихідний вузол для ребер	M1001
TargetId	Категорія	❌ Необов'язково	Цільовий вузол для ребер	M1002
Підказка по краях (необов'язково)	Категорія	Новий!	Багатополюсна підказка з розумною системою резервного копіювання	Підтримується кілька полів
Значення краю	Вимірювання	Покращено	Інтенсивність потоку для перехресної фільтрації + пропорційна ширина	85.0, 150.5, 89.1

⚙️ Повний посібник з конфігурації

Крок 1: Підготуйте вміст у форматі SVG

Створіть SVG-вимірник: Переконайтеся, що ваш SVG містить коректну розмітку з унікальними ідентифікатор атрибути
Ідентифікатори збігаються: Значення NodeId повинні відповідати SVG елементу ідентифікатор саме ті атрибути.
Чиста структура: Використовуйте узгоджені розміри та уникайте складних трансформацій
Нейтральні кольори: Використовуйте нейтральні кольори SVG; дозвольте візуальному контролювати забарвлення
Готовий до роботи дизайн: Створюйте контури країв, щоб вони добре працювали з пропорційним масштабуванням ширини

SVG Content = Вміст SVG 

"

  <rect id=’M1001′ x=’100′ y=’100′ width=’80’ height=’50’ fill=’#cccccc’/>

  <rect id=’M1002′ x=’220′ y=’100′ width=’80’ height=’50’ fill=’#cccccc’/>

  <line id=’E1001′ x1=’180′ y1=’125′ x2=’220′ y2=’125′ stroke=’#999999’/>

  <circle id=’T1101′ cx=’260′ cy=’460′ r=’30’ fill=’#aaaaaa’/>

"

Step 2: Download Visual and Insert License

📽️ In this video, you’ll learn how to download the Digital Twin visual from AppSource and activate your license.

Download Visual: Download the Digital Twin visual from MS AppSource
Додати візуальний ряд: Вставте візуалізацію "Цифровий близнюк" у свій звіт
Insert License: Paste your license key into the License section under Format your visual

Step 3: Import Your Data

📽️ This video shows how to prepare your SVG layout and structure your data table.

Prepare Data: Create a single data table combining nodes and edges (see above)
Import Data: Import the SVG (e.g. as .txt) and data table (e.g. as csv.) into Power BI field

Step 4: Connect Data to the Visual

📽️ In this video, you’ll connect your data to the visual and enable navigation and interactivity with other visuals.

Apply Basic Data: Drag SVG content, node ID, and edge ID fields in the respective Visualizations pane
Add Enhanced Data: Add measures to legend and tooltip fields to enrich the visual
Implement Cross-Filtering: Include NodeValue and EdgeValue measures to ensure filtering works across visuals
Visual Navigation: Test the visual navigation features using zoom controls, mini-map or mouse-over

Step 5: Customize Your Nodes

📽️ This video covers how to apply conditional formatting to highlight node insights.

Simple Node Coloring: Select your preferred color for each node in the Nodes section under Format your visual
Or Apply Conditional-Formatting: Set up individual rules to color your nodes by clicking the formula icon

Step 6: Customize Your Edges

📽️ In this video, learn how to customize flows and connections clearly and dynamically.

(De-)select Gradient: Toggle gradient on/off for edge coloring
Customize Format: Adjust opacity, line width, or layer order
Simple Edge Coloring: Select your preferred color for each edge in the Edges section under Format your visual
Or Apply Conditional-Formatting: Set up individual rules to color your edges by clicking the formula icon

Step 7: Create Advanced Tooltip

📽️ This video explains how to display extra context via mouse-over, with either simple or advanced. tooltips

Apply Basic Tooltip: Drag fields into the Tooltip section to apply a basic tooltip
Or Create Advanced Tooltip: Create a custom tooltip page with charts, KPIs, and more
Connect to Visual: Add nodeID or edgeID to the Tooltip field

Step 8: Develop Drillthrough Option

📽️ In this video, learn how to create deep-dive analysis pages for nodes or edges.

Create Detail Page: Create a report page and design customized visuals for detailed insights
Connect to Visual: Add nodeID or edgeID to the Drillthrough field
Test Drillthrough: Right-click a node or edge → Drillthrough to view details

Step 9: Apply Advanced Conditional Formatting

📽️ In this video, you’ll learn how to apply rule-based formatting using combined measures for clearer, priority-based node and edge coloring.

Create Combined Measure: Create a combined measure as a column to reflect multiple conditions (e.g., node status and type)
Умовне форматування: Set up conditional formatting rules based on the new combined measure
Insert Legend: Insert the same field as a legend to improve clarity and filtering

Посібник з використання розширених функцій

Покращена навігація та масштабування ✨

Взаємодія з мишею та дотиками

Колесо миші: Прокрутка для збільшення/зменшення масштабу з плавною анімацією
Клацніть і перетягніть: Панорамування з візуальним зворотним зв'язком курсору (хапання/захоплення)
Управління навігацією: Використовуйте екранні кнопки +, - та "Додому
Перезавантажити вигляд: Натисніть кнопку "Додому", щоб плавно повернутися до початкового вигляду
Навігація по міні-мапі: Натисніть на міні-карту, щоб перейти до інших областей
Відстеження області перегляду: Прямокутник видового екрану в реальному часі в міні-карті

🎨 Інтерактивна система легенд ✨

Налаштування та використання легенди

Налаштування: Перетягніть будь-яке категорійне поле до "Колір легенди (необов'язково)"
Розпізнавання кольорів: Легенда автоматично зчитує фактичні кольори з зображених вузлів
Натисніть "Фільтрувати": Клацніть елементи легенди, щоб виділити відповідні вузли
Візуальний зворотній зв'язок: Вибрані категорії підсвічені, інші затемнені
Крос-візуальний: Клацання на легенді запускає фільтрацію в інших візуалізаціях
Перезавантаження: Клацніть той самий елемент легенди ще раз, щоб прибрати виділення

Порада від професіонала: Ідеально підходить для моніторингу стану, фільтрації категорій та розуміння того, що означають кольори вузлів з першого погляду.

Пропорційна ширина кромки ✨ Пропорційна ширина кромки ✨

Візуалізація на основі потоку

Картографування даних: Зіставити інтенсивність потоку/пропускну здатність з полем Edge Value
Увімкнути функцію: Панель форматування > Краї > Загальні > "Пропорційна ширина"
Візуальне масштабування: Товщина кромки автоматично масштабується відповідно до значень даних
Контекстне масштабування: Нормалізація для кожного вузла показує відносну важливість
Ідентифікація вузьких місць: Миттєве виявлення високопоточних з'єднань
Візуальний діапазон: 1px мінімальна товщина до 8px максимальна товщина

Бізнес-цінність: Використовуйте для оперативних інформаційних панелей, щоб негайно виявляти вузькі місця та високопродуктивні з'єднання у вашому цифровому двійнику.

Покращена система підказок ✨

Гнучка конфігурація підказок

Підказки вузлів: Використовуйте формат "Key: Значення\nKey2: Значення2" у полі підказки вузла
Багатоканальна підтримка: Використовуйте \n для розривів рядків у вмісті підказки
Крайні підказки: Перетягніть кілька полів до "Підказка по краю (необов'язково)"
Розумний запасний варіант: Автоматична основна інформація, якщо не вказано користувацьких полів
Польові етикетки: Назви полів автоматично стають мітками підказок
Багатий вміст: Підтримка операційного контексту та бізнес-метрик

Удосконалена перехресна фільтрація

Тристороння система фільтрації

Таблиця ↔ Візуальне: Клацайте рядки таблиці, щоб виділити вузли/ребра
Легенда ↔ візуальне: Клацніть елементи легенди, щоб виділити категорії
Візуальні ↔ інші візуальні: Клацніть вузли/ребра, щоб відфільтрувати діаграми/таблиці
Мульти-вибір: Утримуючи клавішу Ctrl, клацніть кілька елементів
Очистити вибір: Клацніть на порожньому місці, щоб скинути всі виділення
Візуальний зворотній зв'язок: Виділені елементи повністю непрозорі, інші затемнені

⚡ Розширені функції керування краями

Панель впорядкованих форматів

Секція країв:

Кольори країв (підгрупа): Індивідуальні кольори країв і керування градієнтом
⚙️ Загальна (підгрупа): Непрозорість, порядок візуалізації та пропорційна ширина

Доступні елементи керування:

Увімкнути градієнт краю: Плавні кольорові переходи між вузлами
Пропорційна ширина: Масштабування товщини на основі потоку
Непрозорість країв: Контроль прозорості (0-100%)
Показати краї на передньому плані: Керування шаруванням

Налаштування наскрізного свердління

Створення наскрізних сторінок: Налаштуйте спеціальні сторінки з деталями
Додати поля фільтрації: Включити NodeId/EdgeId у наскрізні фільтри
Тестова навігація: Клацніть правою кнопкою миші на вузлах/ребрах, щоб переглянути варіанти наскрізного свердління
Порожнє меню: Клацніть правою кнопкою миші порожні області для стандартного меню Power BI
Перевірте контекст: Переконайтеся, що відфільтрований контекст передається правильно

🔧 Вичерпний посібник з усунення несправностей

❌ Покращені питання навігації ✨

Перейдіть на панель Формат > Налаштування навігації для керування масштабуванням і видимістю міні-карт
Перевірте достатній візуальний простір для елементів керування навігацією та міні-карти
Протестуйте зворотний зв'язок курсору під час панорамування (має показувати захоплення/захоплення)
Забезпечити коректне оновлення прямокутника міні-карти під час масштабування/панорамування
Тестування на різних розмірах екрану для перевірки адаптивності

❌ Інтерактивні завдання з легендами ✨

Переконайтеся, що поле категорій перетягнуто на "Колір легенди (необов'язково)"
Перевірте, щоб вузли мали реальні кольори (не всі за замовчуванням сірі)
Переконайтеся, що категоріальні дані містять змістовні, чисті значення
Протестуйте функціонал натискання на легенду для поведінки підсвічування
Переконайтеся, що розташування легенди не затуляє основний візуальний контент

❌ Проблеми з пропорційною шириною країв ✨

Увімкніть перемикач "Пропорційна ширина" на панелі Формат > Краї > Загальні
Переконайтеся, що поле Edge Value містить числові дані потоку
Перевірте, чи правильно відображені EdgeId, SourceId, TargetId
Переконайтеся, що граничні дані мають значущі відмінності у значеннях
Перевірте, чи масштабування товщини є візуально доречним

❌ Покращені проблеми з підказками ✨

Використовуйте формат "Key: Значення\nKey2: Значення2" для поля підказки вузла
Для підказки по краях перетягніть поля до розділу "Підказка по краях (необов'язково)"
Тестування розумного переходу, коли не вказано жодного поля підказки краю
Переконайтеся, що назви полів відображаються у вигляді підписів у підказках
Забезпечити відображення багаторядкового контенту з належними розривами рядків

❌ Перехресна фільтрація не працює

Додавання полів виміру Значення вузла та/або Значення ребра
Переконайтеся, що значення мір заповнені (не NULL/порожні)
Перевірте обидва напрямки: таблиця → візуальний і візуальний → таблиця
Самостійно протестуйте фільтрацію на основі легенди
Перевірте, чи виділення викликає виділення (зміна непрозорості)
Спочатку протестуйте з простим одиночним вибором

❌ Візуальний Не відображається

Переконайтеся, що міра вмісту SVG повертає правильну розмітку SVG
Переконайтеся, що поле NodeId відображено і містить дані
Переконайтеся, що ідентифікатори SVG-елементів точно відповідають значенням NodeId
Перевірка синтаксису SVG за допомогою онлайн-валідатора SVG

❌ Неінтерактивні вузли

Переконайтеся, що роль даних NodeId заповнено
Перевірте, чи мають SVG-елементи відповідні атрибути id
Переконайтеся, що елементи не приховані іншими елементами SVG
Протестуйте ефекти наведення, щоб підтвердити виявлення елементів

❌ Краї не відображаються

Ролі даних Map EdgeId, SourceId та TargetId
Переконайтеся, що значення SourceId/TargetId відповідають наявним значенням NodeId
Перевірте налаштування непрозорості країв (можливо, встановлено занадто низький рівень)
Перевірте порядок рендерингу країв (передній план проти фону)
Спочатку протестуйте з висококонтрастними кольорами країв

🎉 Передові найкращі практики

Покращене моделювання даних ✨

Виберіть значущі категоріальні поля для інтерактивної легенди
Структурувати підказки, використовуючи формат "Ключ: Значення" у форматі "Ключ: Значення
Використовуйте метрики потоку для пропорційної ширини країв
Забезпечити правильну обробку NULL у структурі UNION
Тест з реалістичними обсягами даних

Продуктивність та навігація ✨

Використовуйте міні-карту важеля для навігації великими діаграмами
Оптимізація складності SVG для плавного масштабування/панорамування
Випробування пропорційної ширини з реалістичними даними потоку
Відстежуйте використання пам'яті за допомогою розширених функцій
Стратегічно використовуйте поля вимірювання для перехресної фільтрації

Користувацький досвід ✨

Використовуйте кліки по легенді для фільтрації на основі категорій
Поєднання фільтрації за таблицею з фільтрацією за легендою
Створюйте змістовний вміст підказок
Стандартизуйте рівні масштабування та шаблони навігації
Тестуйте всі робочі процеси взаємодії від початку до кінця

Розширена інтеграція ✨

Використовуйте пропорційну ширину для оперативного моніторингу
Поєднуйте фільтрацію легенд з аналізом часових рядів
Об'єднайте дані про потоки з предиктивною аналітикою
Створюйте комплексні мультимодальні інформаційні панелі
Інтеграція з географічними візуалізаціями за допомогою спільної фільтрації

Готові розпочати? Цей комплексний візуальний інструмент перетворює статичні діаграми в інтерактивні цифрові панелі-близнюки з професійною навігацією, інтелектуальною візуалізацією потоків, фільтрацією на основі категорій та багатою контекстною інформацією!