Pierwsze kroki - Digital Twin Visual

Witamy! Ten kompleksowy przewodnik pomoże szybko rozpocząć pracę z wizualizacją Digital Twin dla Power BI, obejmującą zaawansowaną nawigację, interaktywną legendę, proporcjonalną szerokość krawędzi, ulepszone podpowiedzi, filtrowanie krzyżowe i możliwości drążenia.

Kompleksowy przegląd funkcji

Ulepszona nawigacja ✨

Płynne powiększanie i przesuwanie z płynnymi animacjami
Profesjonalna nawigacja ekranowa
Minimapa w czasie rzeczywistym ze wskaźnikiem rzutni
Inteligentne sprzężenie zwrotne kursora (chwytanie/chwytanie)
Precyzja zbliżona do CAD dla dużych diagramów

Interaktywny system legend 🎨

Dynamiczna legenda na podstawie rzeczywistych kolorów węzłów
Kliknij elementy legendy, aby podświetlić węzły
Działa z dowolnym polem kategorycznym
Integracja filtrowania krzyżowego
Wyświetlanie liczby węzłów według kategorii

📊 Proporcjonalna szerokość krawędzi ✨

Grubość krawędzi skaluje się wraz z intensywnością przepływu
Algorytm normalizacji na węzeł
Natychmiastowa identyfikacja wąskich gardeł
Włączanie/wyłączanie za pomocą panelu formatu
Kontekstowa wizualizacja przepływu

💬 Ulepszone podpowiedzi ✨

Elastyczne podpowiedzi węzłów "Klucz: Wartość" podpowiedzi węzła
Inteligentny system awaryjny podpowiedzi krawędzi
Obsługa wielu pól z nazwami pól
Automatyczne generowanie etykiet
Konstrukcja kompatybilna wstecz

Zaawansowane filtrowanie krzyżowe

Dwukierunkowe filtrowanie za pomocą tabel
Indywidualne podświetlanie węzłów/krawędzi
Filtrowanie kategorii oparte na legendzie
Obsługa wielokrotnego wyboru
Ulepszony model danych z miarami

Integracja z Power BI

Menu kontekstowe zgodne z AppSource
Bogate możliwości drążenia
Zorganizowane elementy sterujące panelu formatu
Ulepszona kontrola krawędzi z podgrupami
Profesjonalne zarządzanie selekcją

Rozszerzona konfiguracja danych i wymagania

⚠️ Ważne: Wszystkie dane muszą znajdować się w jednej tabeli przy użyciu struktury UNION z odpowiednią obsługą NULL w celu uzyskania optymalnej wydajności.

Ulepszona struktura modelu danych

- Ulepszona struktura danych ze wszystkimi nowymi funkcjami ✨

SELECT 

    NodeId, 

    'Status: Uruchomiony\nTyp: Machine\nTemperature: 85°C\nEfficiency: 92%" jako NodeTooltip,

    'Running' jako LegendColor, - Dla interaktywnej legendy ✨

    NULL jako EdgeId, NULL jako SourceId, NULL jako TargetId, NULL jako EdgeTooltip,

    Wydajność jako NodeValue, - Do filtrowania krzyżowego

    NULL jako EdgeValue

FROM NodesTable

UNIA WSZYSTKO

SELECT 

    NULL jako NodeId, NULL jako NodeTooltip, NULL jako LegendColor,

    EdgeId, SourceId, TargetId,

    'Typ: MaterialFlow\nIntensity: High\nPressure: 2.5 bar" jako EdgeTooltip, - Inteligentne etykiety narzędzi ✨

    NULL jako NodeValue,

    FlowIntensity as EdgeValue - filtrowanie krzyżowe + proporcjonalna szerokość ✨

FROM EdgesTable

Odniesienie do rozszerzonych ról danych

Pole	Typ	Status	Opis	Przykład
Zawartość SVG	Pomiar	Wymagane	Znaczniki SVG zawierające schemat cyfrowego bliźniaka	....
NodeId	Kategoria	Wymagane	Unikalny identyfikator dla każdego węzła	M1001, B1201, T1101
Podpowiedź węzła	Kategoria	✨ Ulepszony	"Klucz: Wartość" wielowierszowy format podpowiedzi	Status: Uruchomiony\nTyp: Maszyna\nWydajność: 92%
Kolor legendy (opcjonalnie)	Kategoria	Nowość!	Pole kategoryczne do interaktywnego generowania legendy	Uruchamianie, konserwacja, offline
Wartość węzła	Pomiar	Ulepszony	Wskaźniki biznesowe dla węzłów filtrowania krzyżowego	85.4, 92.1, 79.8
EdgeId	Kategoria	Opcjonalnie	Unikalny identyfikator dla każdej krawędzi	E1001, E1002
SourceId	Kategoria	Opcjonalnie	Węzeł źródłowy dla krawędzi	M1001
TargetId	Kategoria	Opcjonalnie	Węzeł docelowy dla krawędzi	M1002
Podpowiedź krawędzi (opcjonalnie)	Kategoria	Nowość!	Podpowiedź dla wielu pól z inteligentnym systemem awaryjnym	Obsługa wielu pól
Wartość krawędzi	Pomiar	Ulepszony	Intensywność przepływu dla filtrowania krzyżowego + proporcjonalna szerokość	85.0, 150.5, 89.1

⚙️ Kompleksowy przewodnik konfiguracji

Krok 1: Przygotowanie zawartości SVG

Tworzenie miary SVG: Upewnij się, że SVG zawiera prawidłowe znaczniki z unikalnym id atrybuty
Identyfikatory meczów: Wartości NodeId muszą pasować do elementu SVG id atrybuty dokładnie
Czysta struktura: Używaj spójnych rozmiarów i unikaj złożonych transformacji
Neutralne kolory: Używaj neutralnych kolorów SVG; pozwól wizualnej kontroli nad kolorystyką
Konstrukcja przystosowana do krawędzi: Zaprojektuj ścieżki krawędzi tak, aby działały dobrze z proporcjonalnym skalowaniem szerokości.

Zawartość 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
Dodaj wizualizację: Wstaw wizualizację Digital Twin do raportu
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)
Formatowanie warunkowe: 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

Przewodnik korzystania z funkcji zaawansowanych

Ulepszona nawigacja i powiększanie ✨

Interakcje myszy i dotyku

Kółko myszy: Przewijanie w celu powiększania/pomniejszania z płynnymi animacjami
Kliknij i przeciągnij: Przesuwanie z wizualnym sprzężeniem zwrotnym kursora (chwytanie)
Elementy sterujące nawigacji: Korzystanie z ekranowych przycisków +, - i ekranu głównego
Widok resetowania: Kliknij przycisk Home, aby płynnie powrócić do pierwotnego widoku.
Nawigacja z minimapą: Kliknij minimapę, aby przejść do różnych obszarów
Śledzenie rzutni: Wyświetlanie prostokąta rzutni w czasie rzeczywistym na minimapie

Interaktywny system legend 🎨

Konfiguracja i korzystanie z legendy

Konfiguracja: Przeciągnij dowolne pole kategoryczne do "Kolor legendy (opcjonalnie)".
Czytanie w kolorze: Legenda automatycznie odczytuje rzeczywiste kolory z renderowanych węzłów
Kliknij, aby filtrować: Kliknij elementy legendy, aby podświetlić odpowiednie węzły
Wizualne sprzężenie zwrotne: Wybrane kategorie podświetlone, inne przyciemnione
Cross-Visual: Kliknięcia legendy uruchamiają filtrowanie w innych elementach wizualnych
Reset: Kliknij ponownie ten sam element legendy, aby wyczyścić podświetlenie

Pro Tip: Idealny do monitorowania stanu, filtrowania kategorii i zrozumienia, co reprezentują kolory węzłów na pierwszy rzut oka.

📊 Proporcjonalna szerokość krawędzi ✨

Wizualizacja oparta na przepływie

Mapowanie danych: Mapowanie intensywności przepływu/przepustowości do pola Edge Value
Włącz funkcję: Okienko Format > Krawędzie > Ogólne > "Szerokość proporcjonalna"
Skalowanie wizualne: Grubość krawędzi automatycznie skaluje się wraz z wartościami danych
Skalowanie kontekstowe: Normalizacja na węzeł pokazuje względne znaczenie
Identyfikator wąskiego gardła: Natychmiastowa identyfikacja połączeń o wysokim przepływie
Zasięg widzenia: Minimalna grubość 1px do maksymalnej grubości 8px

Wartość biznesowa: Użyj go do pulpitów operacyjnych, aby natychmiast wykryć wąskie gardła i połączenia o wysokiej przepustowości w cyfrowym bliźniaku.

💬 Ulepszony system podpowiedzi ✨

Elastyczna konfiguracja podpowiedzi

Podpowiedzi węzłów: Użyj formatu "Key: Wartość\nKlucz2: Wartość2" w polu podpowiedzi węzła.
Obsługa wielu linii: Używanie \n do łamania linii w treści podpowiedzi
Podpowiedzi krawędzi: Przeciągnij wiele pól do "Podpowiedzi krawędzi (opcjonalnie)"
Smart Fallback: Automatyczne informacje podstawowe, gdy nie określono pól niestandardowych
Etykiety terenowe: Nazwy pól automatycznie stają się etykietami podpowiedzi
Bogata zawartość: Wsparcie dla kontekstu operacyjnego i wskaźników biznesowych

Zaawansowane filtrowanie krzyżowe

Trójdrożny system filtrowania

Tabela ↔ Wizualizacja: Kliknij wiersze tabeli, aby podświetlić węzły/krawędzie
Legend ↔ Visual: Kliknij elementy legendy, aby wyróżnić kategorie
Wizualne ↔ Inne wizualne: Kliknij węzły/krawędzie, aby filtrować wykresy/tabele
Wielokrotny wybór: Przytrzymaj klawisz Ctrl i kliknij wiele elementów
Wyczyść wybór: Kliknij puste miejsce, aby zresetować wszystkie wybory
Wizualne sprzężenie zwrotne: Podświetlone elementy pełne krycie, inne przyciemnione

Zaawansowana kontrola krawędzi

Okienko formatu zorganizowanego

📁 Sekcja krawędzi:

🎨 Kolory krawędzi (podgrupa): Indywidualne kolory krawędzi i kontrola gradientu
⚙️ Ogólne (podgrupa): Krycie, kolejność renderowania i proporcjonalna szerokość

Dostępne elementy sterujące:

Włącz gradient krawędzi: Płynne przejścia kolorów między węzłami
Proporcjonalna szerokość: Skalowanie grubości oparte na przepływie
Krycie krawędzi: Kontrola przezroczystości (0-100%)
Pokaż krawędzie na pierwszym planie: Kontrola warstw

🎯 Konfiguracja wiercenia przelotowego

Tworzenie stron z drążeniem: Konfiguracja dedykowanych stron szczegółowych
Dodaj pola filtrów: Uwzględnianie NodeId/EdgeId w filtrach drążących
Nawigacja testowa: Kliknij prawym przyciskiem myszy węzły/krawędzie, aby wyświetlić opcje drążenia
Menu pustej przestrzeni: Kliknięcie prawym przyciskiem myszy pustych obszarów dla standardowego menu Power BI
Weryfikuj kontekst: Upewnij się, że filtrowany kontekst jest przekazywany poprawnie

🔧 Kompleksowy przewodnik rozwiązywania problemów

Ulepszona nawigacja ❌ Problemy z nawigacją ✨

Sprawdź Panel formatu > Ustawienia nawigacji dla elementów sterujących zoomem i widoczności minimapy.
Zweryfikuj wystarczającą przestrzeń wizualną dla elementów sterujących nawigacją i minimapy.
Przetestuj sprzężenie zwrotne kursora podczas operacji przesuwania (powinno pokazywać chwytanie/chwytanie).
Zapewnienie poprawnej aktualizacji prostokąta minimapy podczas powiększania/przesuwania.
Testowanie responsywności na ekranach o różnych rozmiarach

Interaktywne problemy z legendą ❌

Sprawdź, czy pole kategoryczne zostało przeciągnięte do "Kolor legendy (opcjonalnie)".
Sprawdź, czy węzły mają rzeczywiste kolory (nie wszystkie domyślnie szare).
Upewnij się, że dane kategorialne zawierają znaczące, czyste wartości.
Przetestuj funkcję kliknięcia legendy pod kątem działania podświetlenia
Sprawdź, czy pozycjonowanie legendy nie zasłania głównej zawartości wizualnej.

Problemy z proporcjonalną szerokością krawędzi ❌

Włącz przełącznik "Szerokość proporcjonalna" w panelu Format > Krawędzie > Ogólne.
Upewnij się, że pole Edge Value zawiera numeryczne dane przepływu.
Sprawdź, czy EdgeId, SourceId, TargetId są prawidłowo zmapowane.
Sprawdź, czy dane dotyczące krawędzi mają znaczące różnice w wartościach.
Sprawdź, czy skalowanie grubości jest odpowiednie wizualnie

❌ Ulepszone problemy z podpowiedziami ✨

Użyj formatu "Key: Wartość\nKlucz2: Wartość2" dla pola podpowiedzi węzła
W przypadku podpowiedzi krawędziowej przeciągnij pola do sekcji "Podpowiedź krawędziowa (opcjonalnie)".
Test inteligentnego powrotu, gdy nie określono pól podpowiedzi krawędzi
Sprawdź, czy nazwy pól są wyświetlane jako etykiety w podpowiedziach.
Zapewnienie wyświetlania zawartości wielowierszowej z odpowiednimi podziałami wierszy.

Filtrowanie krzyżowe nie działa

Dodaj pola pomiaru Node Value i/lub Edge Value
Upewnij się, że wartości miar są wypełnione (nie NULL/puste).
Przetestuj oba kierunki: tabela → wizualny i wizualny → tabela
Niezależne testowanie filtrowania opartego na legendzie
Sprawdź, czy zaznaczenie wyzwala podświetlenie (zmiany krycia).
Najpierw przetestuj z prostym pojedynczym wyborem

Wizualizacja nie jest wyświetlana

Sprawdź, czy miara zawartości SVG zwraca prawidłowe znaczniki SVG
Sprawdź, czy pole NodeId jest zmapowane i zawiera dane.
Upewnij się, że identyfikatory elementów SVG dokładnie odpowiadają wartościom NodeId
Sprawdzanie poprawności składni SVG za pomocą walidatora SVG online

❌ Węzły nie są interaktywne

Potwierdzenie wypełnienia roli danych NodeId
Sprawdź, czy elementy SVG mają pasujące atrybuty id
Sprawdź, czy elementy nie są ukryte przez inne elementy SVG
Przetestuj efekty najechania kursorem, aby potwierdzić wykrywanie elementów

Niewidoczne krawędzie

Mapowanie ról danych EdgeId, SourceId i TargetId
Upewnij się, że wartości SourceId/TargetId są zgodne z istniejącymi wartościami NodeId.
Sprawdź ustawienie krycia krawędzi (może być zbyt niskie).
Weryfikacja kolejności renderowania krawędzi (pierwszy plan vs tło)
Najpierw przetestuj kolory krawędzi o wysokim kontraście

Zaawansowane najlepsze praktyki

Ulepszone modelowanie danych ✨

Wybierz znaczące pola kategorialne dla interaktywnej legendy
Struktura podpowiedzi przy użyciu formatu "Klucz: Wartość"
Użyj wskaźników przepływu dla proporcjonalnej szerokości krawędzi
Zapewnienie prawidłowej obsługi wartości NULL w strukturze UNION
Testowanie przy użyciu realistycznych ilości danych

Wydajność i nawigacja ✨

Wykorzystanie minimapy do nawigacji po dużych diagramach
Optymalizacja złożoności SVG dla płynnego powiększania/przesuwania
Test szerokości proporcjonalnej z realistycznymi danymi przepływu
Monitorowanie wykorzystania pamięci dzięki ulepszonym funkcjom
Strategiczne wykorzystanie pól miar do filtrowania krzyżowego

Doświadczenie użytkownika ✨

Użyj kliknięć legendy do filtrowania opartego na kategoriach
Połączenie filtrowania tabeli z filtrowaniem legendy
Zaprojektuj sensowną zawartość podpowiedzi
Standaryzacja poziomów powiększenia i wzorców nawigacji
Testowanie wszystkich przepływów pracy interakcji od początku do końca

Zaawansowana integracja ✨

Wykorzystanie proporcjonalnej szerokości do monitorowania operacyjnego
Połączenie filtrowania legend z analizą szeregów czasowych
Połącz dane o przepływie z analizą predykcyjną
Tworzenie kompleksowych, multimodalnych pulpitów nawigacyjnych
Integracja z wizualizacjami geograficznymi przy użyciu filtrowania współdzielonego

Gotowy do rozpoczęcia? Ta wszechstronna wizualizacja przekształca statyczne diagramy w interaktywne cyfrowe bliźniacze pulpity nawigacyjne z profesjonalną nawigacją, inteligentną wizualizacją przepływu, filtrowaniem opartym na kategoriach i bogatymi informacjami kontekstowymi!