Erste Schritte - Digital Twin Visual

Herzlich willkommen! Dieser umfassende Leitfaden hilft Ihnen, schnell mit dem Digital Twin Visual für Power BI zu arbeiten, das eine erweiterte Navigation, eine interaktive Legende, eine proportionale Randbreite, erweiterte Tooltips, Cross-Filtering und Drill-Through-Funktionen bietet.

📋 Umfassende Funktionsübersicht

🔍 Verbesserte Navigation ✨

Flüssiges Zoomen und Schwenken mit sanften Animationen
Professionelle Navigationssteuerung auf dem Bildschirm
Echtzeit-Minikarte mit Sichtfensteranzeige
Intelligentes Cursor-Feedback (Greifen/Grabbing)
CAD-ähnliche Präzision für große Diagramme

🎨 Interaktives Legenden-System ✨

Dynamische Legende aus aktuellen Knotenfarben
Klicken Sie auf Legendenelemente, um Knoten zu markieren
Funktioniert mit jedem kategorialen Feld
Integration von Cross-Filtering
Anzeige der Knotenanzahl pro Kategorie

📊 Proportionale Kantenbreite ✨

Randdicke skaliert mit der Fließintensität
Algorithmus zur Normalisierung pro Knoten
Sofortige Identifizierung von Engpässen
Ein/Ausschalten über das Formatfenster
Kontextabhängige Flussvisualisierung

💬 Verbesserte Tooltips ✨

Flexible "Schlüssel: Wert" Knoten-Tooltips
Smart Edge Tooltip Fallback-System
Unterstützung von mehreren Feldern mit Feldnamen
Automatische Etikettenerstellung
Abwärtskompatibles Design

🔄 Erweiterte Cross-Filterung

Bidirektionales Filtern mit Tabellen
Hervorhebung einzelner Knoten/Kanten
Legendenbasierte Kategoriefilterung
Unterstützung von Mehrfachauswahlen
Erweitertes Datenmodell mit Maßnahmen

🎯 Power BI-Integration

AppSource-kompatible Kontextmenüs
Umfangreiche Drill-Through-Funktionen
Organisierte Steuerelemente im Formatbereich
Verbesserte Kantensteuerung mit Untergruppen
Professionelles Auswahlmanagement

📊 Erweitertes Daten-Setup und Anforderungen

⚠️ Wichtig: Alle Daten müssen sich in einer einzigen Tabelle befinden, die eine UNION-Struktur mit ordnungsgemäßer NULL-Behandlung für optimale Leistung verwendet.

Verbesserte Datenmodellstruktur

- Verbesserte Datenstruktur mit allen neuen Funktionen ✨

SELECT 

    NodeId, 

    'Status: Running\nType: Maschine\nTemperatur: 85°C\nWirkungsgrad: 92%' als NodeTooltip,

    'Running' als LegendColor, - Für interaktive Legende ✨

    NULL als EdgeId, NULL als SourceId, NULL als TargetId, NULL als EdgeTooltip,

    Effizienz als NodeValue, - für Cross-Filtering

    NULL als EdgeValue

FROM NodesTable

UNION ALL

SELECT 

    NULL als NodeId, NULL als NodeTooltip, NULL als LegendColor,

    EdgeId, SourceId, TargetId,

    Typ: MaterialFlow\nIntensität: High\nPressure: 2.5 bar' as EdgeTooltip, - Smart tooltips ✨

    NULL als NodeValue,

    FlowIntensity als EdgeValue - Querfilterung + proportionale Breite ✨

FROM EdgesTable

Erweiterte Datenrollen-Referenz

Feld	Typ	Status	Beschreibung	Beispiel
SVG-Inhalt	Maßnahme	✅ Erforderlich	SVG-Markup mit dem Diagramm des digitalen Zwillings	...
NodeId	Kategorie	✅ Erforderlich	Eindeutiger Bezeichner für jeden Knoten	M1001, B1201, T1101
Knoten-Tooltip	Kategorie	✨ Erweitert	"Schlüssel: Wert" Mehrzeiliges Tooltip-Format	Status: In Betrieb\nTyp: Maschine\nWirkungsgrad: 92%
Legendenfarbe (optional)	Kategorie	✨ Neu!	Kategorisches Feld für die interaktive Legendenbildung	Laufen, Wartung, Offline
Knotenpunkt Wert	Maßnahme	🔄 Erweitert	Geschäftsmetriken für Cross-Filtering-Knoten	85.4, 92.1, 79.8
EdgeId	Kategorie	❌ Fakultativ	Eindeutiger Bezeichner für jede Kante	E1001, E1002
SourceId	Kategorie	❌ Fakultativ	Quellknoten für Kanten	M1001
ZielId	Kategorie	❌ Fakultativ	Zielknoten für Kanten	M1002
Rand-Tooltip (optional)	Kategorie	✨ Neu!	Multi-Feld-Tooltip mit intelligentem Fallback-System	Mehrere Felder werden unterstützt
Randwert	Maßnahme	🔄 Erweitert	Durchflussintensität für Querfilterung + proportionale Breite	85.0, 150.5, 89.1

⚙️ Umfassendes Konfigurationshandbuch

Schritt 1: Bereiten Sie Ihren SVG-Inhalt vor

SVG-Maßnahme erstellen: Stellen Sie sicher, dass Ihr SVG gültiges Markup mit eindeutigen id Eigenschaften
Spiel-IDs: NodeId-Werte müssen mit SVG-Element übereinstimmen id Attribute genau
Saubere Struktur: Verwenden Sie eine konsistente Größenordnung und vermeiden Sie komplexe Transformationen
Neutrale Farben: Verwenden Sie neutrale SVG-Farben; lassen Sie die visuelle Kontrolle über die Farbgebung
Kantengerechtes Design: Entwerfen Sie Kantenpfade so, dass sie gut mit der proportionalen Breitenskalierung funktionieren

SVG-Inhalt = 

"

  <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
Visuelles hinzufügen: Fügen Sie das Bildmaterial des Digitalen Zwillings in Ihren Bericht ein
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)
Bedingte Formatierung: 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

🎯 Leitfaden zur Verwendung der erweiterten Funktionen

🔍 Verbesserte Navigation und Zoom ✨

Maus- und Touch-Interaktionen

Mausrad: Scrollen zum Vergrößern/Verkleinern mit sanften Animationen
Klicken und ziehen: Schwenken mit visuellem Cursor-Feedback (Greifen/Grabbeln)
Steuerelemente für die Navigation: Verwenden der Tasten +, - und Home auf dem Bildschirm
Ansicht zurücksetzen: Klicken Sie auf die Schaltfläche "Home", um problemlos zur ursprünglichen Ansicht zurückzukehren.
Minimap-Navigation: Klicken Sie auf die Minimap, um zu verschiedenen Bereichen zu springen
Ansichtsfenster-Verfolgung: Echtzeit-Viewport-Rechteck in der Minimap beobachten

🎨 Interaktives Legenden-System ✨

Einrichtung und Verwendung der Legende

Einrichten: Ziehen Sie ein beliebiges kategorisches Feld auf "Legendenfarbe (optional)".
Farbe lesen: Legende liest automatisch die tatsächlichen Farben von gerenderten Knoten
Klicken Sie zum Filtern: Klicken Sie auf Legendenelemente, um die entsprechenden Knoten zu markieren.
Visuelles Feedback: Ausgewählte Kategorien hervorgehoben, andere abgeblendet
Visuell übergreifend: Legenden-Klicks lösen Filterung in anderen Visualisierungen aus
Zurücksetzen: Klicken Sie erneut auf dasselbe Legendenelement, um die Markierung zu löschen.

💡 Profi-Tipp: Ideal für die Statusüberwachung, das Filtern von Kategorien und um auf einen Blick zu verstehen, was die Farben der Knoten darstellen.

📊 Proportionale Kantenbreite ✨

Flow-basierte Visualisierung

Daten-Mapping: Zuordnung von Durchflussintensität/Durchsatz zum Feld Kantenwert
Funktion aktivieren: Fensterfläche Format > Kanten > Allgemein > "Proportionale Breite"
Visuelle Skalierung: Randdicke skaliert automatisch mit den Datenwerten
Kontextspezifische Skalierung: Die Normalisierung pro Knoten zeigt die relative Bedeutung
Engpass-ID: Sofortige Identifizierung von Verbindungen mit hohem Durchfluss
Sichtweite: 1px Mindest- bis 8px Höchstdicke

💡 Geschäftswert: Verwenden Sie diese Funktion für operative Dashboards, um Engpässe und Verbindungen mit hohem Durchsatz in Ihrem digitalen Zwilling sofort zu erkennen.

💬 Verbessertes Tooltip-System ✨

Flexible Tooltip-Konfiguration

Knoten-Tooltips: Verwenden Sie das Format "Key: Wert\nKey2: Wert2"-Format im Knoten-Tooltip-Feld
Multi-Line-Unterstützung: \n für Zeilenumbrüche im Tooltip-Inhalt verwenden
Rand-Tooltips: Ziehen Sie mehrere Felder auf "Rand-Tooltip (optional)"
Smart Fallback: Automatische Basisinformationen, wenn keine benutzerdefinierten Felder angegeben sind
Feldbezeichnungen: Feldnamen werden automatisch zu Tooltip-Beschriftungen
Reichhaltiger Inhalt: Unterstützung für den betrieblichen Kontext und Geschäftskennzahlen

🔄 Erweiterte Cross-Filterung

Drei-Wege-Filtersystem

Tabelle ↔ Visuell: Klicken Sie auf Tabellenzeilen, um Knoten/Kanten zu markieren
Legende ↔ Visuell: Klicken Sie auf Legendenelemente, um Kategorien hervorzuheben
Visuell ↔ Sonstiges Bildmaterial: Klicken Sie auf Knoten/Kanten, um Diagramme/Tabellen zu filtern
Multi-Auswahl: Halten Sie die Strg-Taste gedrückt und klicken Sie auf mehrere Elemente
Auswahl löschen: Klicken Sie auf eine leere Stelle, um alle Auswahlen zurückzusetzen
Visuelles Feedback: Hervorgehobene Elemente mit voller Deckkraft, andere abgeblendet

⚡ Erweiterte Kantensteuerungen

Organisiertes Format-Fenster

📁 Abschnitt Ränder:

🎨 Kantenfarben (Untergruppe): Individuelle Randfarben und Farbverlaufssteuerung
⚙️ Allgemein (Untergruppe): Deckkraft, Rendering-Reihenfolge und proportionale Breite

Verfügbare Steuerelemente:

Aktivieren Sie den Kantenverlauf: Sanfte Farbübergänge zwischen Knotenpunkten
Proportionale Breite: Strömungsbasierte Dickenskalierung
Deckkraft der Kante: Transparenzkontrolle (0-100%)
Kanten im Vordergrund anzeigen: Kontrolle der Schichtung

🎯 Drill-Through-Einrichtung

Erstellen Sie Drill-Through-Seiten: Spezielle Detailseiten einrichten
Filterfelder hinzufügen: NodeId/EdgeId in Drill-Through-Filter einbeziehen
Test Navigation: Klicken Sie mit der rechten Maustaste auf Knoten/Kanten, um Drill-Through-Optionen anzuzeigen.
Menü Leerer Raum: Klicken Sie mit der rechten Maustaste auf leere Bereiche für das Power BI-Standardmenü
Überprüfen Sie den Kontext: Sicherstellen, dass der gefilterte Kontext korrekt übergeben wird

🔧 Umfassender Leitfaden zur Fehlerbehebung

❌ Verbesserte Navigationsthemen ✨

Überprüfen Sie im Bereich Format > Navigationseinstellungen die Zoomsteuerung und die Sichtbarkeit der Minimap.
Vergewissern Sie sich, dass genügend Sichtfläche für die Navigationssteuerung und die Minimap vorhanden ist.
Testen Sie die Rückmeldung des Cursors während des Schwenks (er sollte grab/grabbing zeigen)
Sicherstellen, dass das Minimap-Rechteck beim Zoomen/Schwenken korrekt aktualisiert wird
Testen Sie die Reaktionsfähigkeit auf verschiedenen Bildschirmgrößen

❌ Interaktive Legendenprobleme ✨

Überprüfen Sie, ob das kategorische Feld auf "Legendenfarbe (optional)" gezogen wird.
Prüfen Sie, ob die Knoten tatsächliche Farben haben (nicht alle standardmäßig grau)
Sicherstellen, dass kategorische Daten aussagekräftige, saubere Werte enthalten
Test der Legenden-Klickfunktionalität für das Hervorhebungsverhalten
Überprüfen Sie, ob die Positionierung der Legende den visuellen Hauptinhalt nicht verdeckt.

❌ Probleme mit der proportionalen Kantenbreite ✨

Aktivieren Sie den Schalter "Proportionale Breite" im Bereich Format > Kanten > Allgemein
Stellen Sie sicher, dass das Feld Kantenwert numerische Flussdaten enthält.
Prüfen Sie, ob EdgeId, SourceId und TargetId richtig zugeordnet sind.
Überprüfen Sie, ob die Randdaten eine sinnvolle Variation der Werte aufweisen.
Prüfung, ob die Dickenskalierung visuell angemessen ist

❌ Verbesserte Tooltip-Probleme ✨

Verwenden Sie das Format "Key: Wert\nKey2: Wert2"-Format für Knoten-Tooltip-Feld
Für Edge Tooltip ziehen Sie die Felder in den Abschnitt "Edge Tooltip (optional)".
Test des intelligenten Fallbacks, wenn keine Edge-Tooltip-Felder angegeben sind
Prüfen Sie, ob Feldnamen als Beschriftungen in der Tooltip-Anzeige erscheinen
Sicherstellen, dass mehrzeilige Inhalte mit korrekten Zeilenumbrüchen angezeigt werden

❌ Querfilterung funktioniert nicht

Knotenwert- und/oder Kantenwert-Messfelder hinzufügen
Sicherstellen, dass die Messwerte ausgefüllt sind (nicht NULL/leer)
Testen Sie beide Richtungen: Tabelle → visuell und visuell → Tabelle
Legendenbasierte Filterung unabhängig testen
Überprüfen Sie, ob die Auswahl Hervorhebungen auslöst (Deckkraftänderungen)
Zunächst mit einfacher Einfachauswahl testen

❌ Visuelles wird nicht angezeigt

Prüfen Sie, ob SVG Content measure gültiges SVG-Markup zurückgibt
Überprüfen, ob das Feld NodeId zugeordnet ist und Daten enthält
Sicherstellen, dass SVG-Element-IDs genau mit NodeId-Werten übereinstimmen
Validierung der SVG-Syntax mit einem Online-SVG-Validator

❌ Knoten nicht interaktiv

Bestätigen, dass die Datenrolle NodeId ausgefüllt ist
Prüfen, ob SVG-Elemente passende id-Attribute haben
Überprüfen Sie, dass die Elemente nicht von anderen SVG-Elementen verdeckt werden.
Testen der Hover-Effekte zur Bestätigung der Elementerkennung

❌ Die Ränder sind nicht sichtbar

Zuordnen von EdgeId-, SourceId- und TargetId-Datenrollen
Sicherstellen, dass SourceId/TargetId-Werte mit vorhandenen NodeId-Werten übereinstimmen
Überprüfen Sie die Einstellung der Kantenopazität (möglicherweise zu niedrig eingestellt)
Überprüfen der Reihenfolge der Kantenwiedergabe (Vordergrund und Hintergrund)
Testen Sie zunächst mit kontrastreichen Randfarben

🎉 Erweiterte bewährte Praktiken

Verbesserte Datenmodellierung ✨

Wählen Sie aussagekräftige kategorische Felder für die interaktive Legende
Strukturierung von Tooltips im Format "Schlüssel: Wert"-Format
Verwendung von Flussmetriken für proportionale Kantenbreite
Sicherstellung der korrekten NULL-Behandlung in der UNION-Struktur
Test mit realistischen Datenmengen

Leistung & Navigation ✨

Nutzung der Minimap für die Navigation in großen Diagrammen
Optimierung der SVG-Komplexität für reibungsloses Zoomen/Schwenken
Test der proportionalen Breite mit realistischen Durchflussdaten
Überwachung der Speichernutzung mit erweiterten Funktionen
Strategische Verwendung von Maßnahmenfeldern für die Querfilterung

Benutzererfahrung ✨.

Legendenklicks für kategoriebasierte Filterung verwenden
Kombinieren Sie Tabellenfilterung mit Legendenfilterung
Sinnvolle Tooltip-Inhalte gestalten
Standardisierung von Zoomstufen und Navigationsmustern
Testen Sie alle Interaktionsabläufe von Anfang bis Ende

Erweiterte Integration ✨

Proportionale Breite für die Betriebsüberwachung verwenden
Kombinieren Sie Legendenfilterung mit Zeitreihenanalyse
Verbinden Sie Flussdaten mit prädiktiver Analytik
Erstellung umfassender multimodaler Dashboards
Integration mit geografischem Bildmaterial durch gemeinsame Filterung

🚀 Bereit für den Einstieg? Dieses umfassende Visual verwandelt statische Diagramme in interaktive digitale Zwillings-Dashboards mit professioneller Navigation, intelligenter Flussvisualisierung, kategoriebasierter Filterung und umfangreichen Kontextinformationen!