Kom i gang - Digital Twin Visual

Velkommen! Denne omfattende veiledningen hjelper deg raskt i gang med Digital Twin Visual for Power BI, med avansert navigasjon, interaktiv tegnforklaring, proporsjonal kantbredde, forbedrede verktøytips, kryssfiltrering og drill-through-funksjoner.

📋 Omfattende funksjonsoversikt

🔍 Forbedret navigasjon ✨

Flytende zoom og panorering med jevne animasjoner
Profesjonelle navigasjonskontroller på skjermen
Minikart i sanntid med visningsportindikator
Smart markørtilbakemelding (gripe/grabbing)
CAD-lignende presisjon for store diagrammer

🎨 Interaktivt Legend System ✨

Dynamisk tegnforklaring fra faktiske nodefarger
Klikk på legendeelementer for å markere noder
Fungerer med alle kategoriske felt
Integrering av kryssfiltrering
Visning av antall noder per kategori

📊 Proporsjonal kantbredde ✨

Kanttykkelsen skalerer med strømningsintensiteten
Normaliseringsalgoritme per node
Øyeblikkelig identifisering av flaskehalser
Slå på/av via formatruten
Visualisering av kontekstuell flyt

💬 Forbedrede verktøytips ✨

Fleksible "Key: Verktøytips for noden "Verdi
Smart fallback-system for verktøytips på kanten
Støtte for flere felt med feltnavn
Automatisk generering av etiketter
Bakoverkompatibel design

🔄 Avansert kryssfiltrering

Toveis filtrering med tabeller
Utheving av individuelle noder/kanter
Legendebasert kategorifiltrering
Støtte for flere valg
Forbedret datamodell med tiltak

🎯 Power BI-integrasjon

AppSource-kompatible kontekstmenyer
Rike muligheter for gjennomboring
Organiserte kontroller i formatruten
Forbedret kantkontroll med undergrupper
Profesjonell utvalgsstyring

📊 Forbedret oppsett og krav til data

⚠️ Viktig: Alle data må være i én enkelt tabell ved hjelp av en UNION-struktur med riktig NULL-håndtering for optimal ytelse.

Forbedret datamodellstruktur

- Forbedret datastruktur med alle de nye funksjonene ✨

VELG 

    NodeId, 

    "Status: Running\nType: Machine\nTemperature: 85°C\nEfficiency: 92%' as NodeTooltip,

    'Running' as LegendColor, - For interaktiv tegnforklaring ✨

    NULL som EdgeId, NULL som SourceId, NULL som TargetId, NULL som EdgeTooltip,

    Effektivitet som NodeValue, - For kryssfiltrering

    NULL som EdgeValue

FROM NodesTable

UNION ALL

VELG 

    NULL as NodeId, NULL as NodeTooltip, NULL as LegendColor,

    EdgeId, SourceId, TargetId,

    'Type: MaterialFlow\nIntensitet: High\nPressure: 2.5 bar' as EdgeTooltip, - Smarte verktøytips ✨

    NULL som NodeValue,

    FlowIntensity som EdgeValue - Kryssfiltrering + proporsjonal bredde ✨

FROM EdgesTable

Referanse for utvidede dataroller

Felt	Type	Status	Beskrivelse	Eksempel
SVG-innhold	Mål	✅ Påkrevd	SVG-markup som inneholder det digitale tvillingdiagrammet	....
NodeId	Kategori	✅ Påkrevd	Unik identifikator for hver node	M1001, B1201, T1101
Node-verktøytips	Kategori	✨ Forbedret	"Nøkkel: Flerlinjers verktøytipsformat "Verdi	Status: Kjører\nType: Maskin\nEffektivitet: 92%
Farge på tegnforklaring (valgfritt)	Kategori	✨ Nytt!	Kategorisk felt for interaktiv generering av forklaringer	Løpende, vedlikehold, frakoblet
Nodeverdi	Mål	🔄 Forbedret	Virksomhetsmålinger for kryssfiltrering av noder	85.4, 92.1, 79.8
EdgeId	Kategori	❌ Valgfritt	Unik identifikator for hver kant	E1001, E1002
KildeId	Kategori	❌ Valgfritt	Kildeknutepunkt for kanter	M1001
TargetId	Kategori	❌ Valgfritt	Målnode for kanter	M1002
Kantverktøytips (valgfritt)	Kategori	✨ Nytt!	Verktøytips for flere felt med smart fallback-system	Støtte for flere felt
Kantverdi	Mål	🔄 Forbedret	Strømningsintensitet for kryssfiltrering + proporsjonal bredde	85.0, 150.5, 89.1

⚙️ Omfattende konfigurasjonsveiledning

Trinn 1: Forbered SVG-innholdet ditt

Opprett SVG-mål: Sørg for at SVG-en din inneholder gyldig markup med unike id egenskaper
Match ID-er: NodeId-verdiene må samsvare med SVG-elementet id attributter nøyaktig
Ren struktur: Bruk konsekvent størrelse og unngå komplekse transformasjoner
Nøytrale farger: Bruk nøytrale SVG-farger; la det visuelle styre fargeleggingen
Edge-Ready Design: Utform kantbaner slik at de fungerer godt med proporsjonal breddeskalering

SVG-innhold 

"

  <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
Legg til Visual: Sett inn det visuelle Digital Twin-bildet i rapporten din
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)
Betinget formatering: 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

🎯 Bruksveiledning for avanserte funksjoner

🔍 Forbedret navigasjon og zoom ✨

Interaksjoner med mus og berøring

Mushjul: Bla for å zoome inn/ut med jevne animasjoner
Klikk og dra: Panorer rundt med visuell markørtilbakemelding (grip/grabbing)
Navigasjonskontroller: Bruk +, - og startknappene på skjermen
Tilbakestill visning: Klikk på Hjem-knappen for å gå tilbake til opprinnelig visning
Minimap-navigasjon: Klikk på minimap for å hoppe til forskjellige områder
Sporing av visningsvinduer: Se rektangelet i sanntidsvisning i minimap

🎨 Interaktivt Legend System ✨

Oppsett og bruk av forklaringer

Oppsett: Dra et kategorisk felt til "Tegnforklaringsfarge (valgfritt)"
Fargelesning: Tegnforklaringen leser automatisk de faktiske fargene fra gjengitte noder
Klikk for å filtrere: Klikk på legendeelementer for å markere tilsvarende noder
Visuell tilbakemelding: Utvalgte kategorier fremheves, andre nedtones
Tverrvisuelt: Klikk på tegnforklaringen utløser filtrering i andre bilder
Tilbakestill: Klikk på samme tegnforklaring igjen for å fjerne markeringen

💡 Profftips: Perfekt for statusovervåking, kategorifiltrering og for å forstå hva nodefargene representerer på et øyeblikk.

📊 Proporsjonal kantbredde ✨

Flytbasert visualisering

Kartlegging av data: Tilordne strømningsintensitet/gjennomstrømning til Edge Value-feltet
Aktiver funksjon: Format-ruten > Kanter > Generelt > "Proporsjonal bredde"
Visuell skalering: Kanttykkelsen skaleres automatisk med dataværdiene
Kontekstuell skalering: Normalisering per node viser relativ viktighet
Flaskehals-ID: Identifiser tilkoblinger med høy gjennomstrømning umiddelbart
Visuell rekkevidde: Minimum 1 piksler til maksimum 8 piksler tykkelse

💡 Forretningsverdi: Bruk til operasjonelle dashbord for å umiddelbart oppdage flaskehalser og forbindelser med høy gjennomstrømning i den digitale tvillingen.

💬 Forbedret verktøytipsystem ✨

Fleksibel konfigurasjon av verktøytips

Node-verktøytips: Bruk "Key: Value\nKey2: Value2"-format i Node Tooltip-feltet
Støtte for flere linjer: Bruk \n for linjeskift i verktøytipsinnhold
Kantverktøytips: Dra flere felt til "Kantverktøytips (valgfritt)"
Smart fallback: Automatisk grunnleggende informasjon når ingen egendefinerte felt er angitt
Feltetiketter: Feltnavn blir automatisk til verktøytipsetiketter
Rikt innhold: Støtte for operasjonell kontekst og forretningsmessige beregninger

🔄 Avansert kryssfiltrering

Treveis filtreringssystem

Tabell ↔ Visuell: Klikk på tabellradene for å markere noder/kanter
Tegnforklaring ↔ Visuell: Klikk på forklaringselementer for å markere kategorier
Visuelt ↔ Annet visuelt: Klikk på noder/kanter for å filtrere diagrammer/tabeller
Flere valgmuligheter: Hold Ctrl nede og klikk på flere elementer
Fjern valg: Klikk på det tomme feltet for å tilbakestille alle valgene
Visuell tilbakemelding: Uthevede elementer med full opasitet, andre nedtonet

⚡ Avanserte kantkontroller

Ruten Organisert format

📁 Kantseksjon:

🎨 Kantfarger (undergruppe): Individuelle kantfarger og gradientkontroller
⚙️ General (undergruppe): Opasitet, gjengivelsesrekkefølge og proporsjonal bredde

Tilgjengelige kontroller:

Aktiver kantgradient: Jevne fargeoverganger mellom noder
Proporsjonal bredde: Strømningsbasert tykkelsesskalering
Kantenes opasitet: Kontroll av gjennomsiktighet (0-100%)
Vis kanter i forgrunnen: Kontroll av lagdeling

🎯 Oppsett for gjennomboring

Opprett gjennomgående sider: Sett opp dedikerte detaljsider
Legg til filterfelt: Inkluder NodeId/EdgeId i drill-through-filtre
Test navigasjon: Høyreklikk på noder/kanter for å se alternativer for gjennomboring
Menyen Empty Space: Høyreklikk på tomme områder for standard Power BI-meny
Bekreft konteksten: Sikre at filtrert kontekst sendes riktig

🔧 Omfattende feilsøkingsveiledning

❌ Forbedrede navigasjonsproblemer ✨

Sjekk Format-ruten > Navigasjonsinnstillinger for zoomkontroller og synlighet på minimap
Kontroller at det er tilstrekkelig visuell plass til navigasjonskontroller og minimap
Test markørtilbakemelding under panorering (bør vise grabbing/grabbing)
Sikrer at rektangelet i minimap-visningsportalen oppdateres riktig under zoom/panorering
Test på ulike skjermstørrelser for responsiv oppførsel

❌ Interaktive forklaringsoppgaver ✨

Kontroller at det kategoriske feltet er dratt til "Legend Color (optional)"
Kontroller at nodene har faktiske farger (ikke alle grå som standard)
Sørg for at kategoriske data inneholder meningsfulle, rene verdier
Test klikkfunksjonaliteten for utheving av tegnforklaring
Kontroller at plasseringen av tegnforklaringen ikke hindrer det visuelle hovedinnholdet

❌ Problemer med proporsjonal kantbredde ✨

Aktiver "Proporsjonal bredde" i Format-ruten > Kanter > Generelt
Sørg for at Edge Value-feltet inneholder numeriske flytdata
Kontroller at EdgeId, SourceId og TargetId er riktig tilordnet
Verifiser at kantdata har meningsfull variasjon i verdiene
Test at tykkelsesskalering er visuelt passende

❌ Forbedrede problemer med verktøytips ✨

Bruk "Key: Value\nKey2: Value2"-format for Node Tooltip-feltet
For Edge Tooltip, dra feltene til "Edge Tooltip (valgfritt)"-seksjonen
Test smart fallback når ingen Edge Tooltip-felt er spesifisert
Kontroller at feltnavnene vises som etiketter i verktøytipsvisningen
Sikre at innhold på flere linjer vises med riktige linjeskift

❌ Kryssfiltrering fungerer ikke

Legg til målefelt for Node Value og/eller Edge Value
Sørg for at måleverdiene er fylt ut (ikke NULL/tomme)
Test begge retninger: tabell → visuell og visuell → tabell
Test legendebasert filtrering uavhengig av hverandre
Verifiser at markeringen utløser høydepunkter (opacitetsendringer)
Test med enkle enkeltvalg først

❌ Visuelt vises ikke

Kontroller at SVG Content measure returnerer gyldig SVG-markup
Kontroller at NodeId-feltet er tilordnet og inneholder data
Sikre at SVG-element-ID-er samsvarer nøyaktig med NodeId-verdier
Valider SVG-syntaksen ved hjelp av en SVG-validator på nett

❌ Noder ikke interaktive

Bekreft at NodeId-datarollen er fylt ut
Kontroller at SVG-elementer har matchende id-attributter
Kontroller at elementer ikke skjules av andre SVG-elementer
Test sveveeffekter for å bekrefte elementdeteksjon

❌ Kantene vises ikke

Tilordne datarollene EdgeId, SourceId og TargetId
Sørg for at SourceId/TargetId-verdiene samsvarer med eksisterende NodeId-verdier
Kontroller innstillingen for kantopasitet (kan være satt for lavt)
Verifiser rekkefølgen på kantgjengivelsen (forgrunn vs. bakgrunn)
Test med kantfarger med høy kontrast først

🎉 Avansert beste praksis

Forbedret datamodellering ✨

Velg meningsfulle kategoriske felt for interaktiv forklaring
Strukturer verktøytips ved hjelp av "Key: Verdi"-format
Bruk strømningsmålinger for proporsjonal kantbredde
Sørg for riktig NULL-håndtering i UNION-strukturen
Test med realistiske datavolumer

Ytelse og navigasjon ✨

Utnytt minimap for navigering i store diagrammer
Optimaliser SVG-kompleksiteten for jevn zoom/panorering
Test proporsjonal bredde med realistiske strømningsdata
Overvåk minnebruken med forbedrede funksjoner
Bruk målefelt strategisk for kryssfiltrering

Brukeropplevelse ✨

Bruk klikk på forklaringer for kategoribasert filtrering
Kombiner tabellfiltrering med legendefiltrering
Utform meningsfylt innhold i verktøytipsene
Standardiser zoomnivåer og navigasjonsmønstre
Test alle interaksjonsarbeidsflyter fra start til slutt

Avansert integrering ✨

Bruk proporsjonal bredde for driftsovervåking
Kombiner legendafiltrering med tidsserieanalyse
Koble sammen flytdata med prediktive analyser
Opprett omfattende multimodale dashbord
Integrer med geografiske visualiseringer ved hjelp av delt filtrering

🚀 Klar til å komme i gang? Dette omfattende visuelle verktøyet forvandler statiske diagrammer til interaktive digitale tvillinginstrumentbord med profesjonell navigering, intelligent flytvisualisering, kategoribasert filtrering og rik kontekstuell informasjon!