Aan de slag - Visual Digital Twin

Welkom! Deze uitgebreide handleiding helpt je snel aan de slag te gaan met de Digital Twin visual voor Power BI, met geavanceerde navigatie, interactieve legenda, proportionele randbreedte, verbeterde tooltips, cross-filtering en drill-through mogelijkheden.

Uitgebreid functieoverzicht

Verbeterde navigatie ✨

Vloeiend zoomen en pannen met vloeiende animaties
Professionele navigatiebediening op het scherm
Real-time minimap met viewport-indicator
Slimme cursorfeedback (grijpen/graaien)
CAD-achtige precisie voor grote diagrammen

Interactief legenda-systeem ✨

Dynamische legenda van werkelijke knooppuntkleuren
Klik op de legenda-items om knooppunten te markeren
Werkt met elk categorisch veld
Cross-filtering integratie
Weergave van aantal knooppunten per categorie

Proportionele randbreedte ✨

De dikte van de randen schaalt met de intensiteit van de stroming
Normalisatiealgoritme per knooppunt
Directe identificatie van knelpunten
In-/uitschakelen via deelvenster Indeling
Contextuele stroomvisualisatie

Verbeterde tooltips ✨

Flexibele "Sleutel: Waarde" knooppunt tooltips
Smart edge tooltip fallback systeem
Ondersteuning voor meerdere velden met veldnamen
Automatisch labels maken
Achterwaarts compatibel ontwerp

Geavanceerde kruisfiltering

Bidirectioneel filteren met tabellen
Individuele knooppunten/randmarkering
Op legenda gebaseerde categoriefiltering
Ondersteuning voor meerdere selecties
Verbeterd gegevensmodel met maatregelen

Integratie van Power BI

AppSource-conforme contextmenu's
Uitgebreide drill-through mogelijkheden
Georganiseerde indeling deelvenster besturingselementen
Verbeterde randbediening met subgroepen
Professioneel selectiebeheer

Verbeterde gegevensinstelling en -vereisten

⚠️ Belangrijk: Alle gegevens moeten in een enkele tabel staan die een UNION-structuur gebruikt met de juiste NULL-afhandeling voor optimale prestaties.

Verbeterde gegevensmodelstructuur

- Verbeterde gegevensstructuur met alle nieuwe functies ✨

SELECT 

    NodeId, 

    Status: Loopt: Temperatuur: 85°C Rendement: 92%' als NodeTooltip,

    'Lopend' als legendaKleur, - Voor interactieve legenda ✨

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

    Efficiëntie als NodeValue, - Voor cross-filtering

    NULL als EdgeValue

VAN Knooppuntentabel

UNIE ALLE

SELECT 

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

    EdgeId, SourceId, TargetId,

    Type: MateriaalStroom: HoogDruk: 2.5 bar' als EdgeTooltip, - Slimme tooltips ✨

    NULL als NodeValue,

    FlowIntensity als EdgeValue - kruisfiltering + proportionele breedte ✨

FROM Randen tabel

Referentie Enhanced Data Roles

Veld	Type	Status	Beschrijving	Voorbeeld
SVG-inhoud	Maatregel	Vereist	SVG-opmaak met het digitale tweelingdiagram	...
NodeId	Categorie	Vereist	Unieke identificatie voor elk knooppunt	M1001, B1201, T1101
Knooppunt tooltip	Categorie	Verbeterd	"Sleutel: Waarde" meerregelige tooltip-indeling	Status: In bedrijf Type: Machine: 92%
Legendekleur (optioneel)	Categorie	Nieuw!	Categorisch veld voor interactieve legendegeneratie	Lopend, Onderhoud, Offline
Knooppuntwaarde	Maatregel	Verbeterd	Bedrijfsgegevens voor cross-filter knooppunten	85.4, 92.1, 79.8
EdgeId	Categorie	Optioneel	Unieke identificatie voor elke rand	E1001, E1002
BronId	Categorie	Optioneel	Bronknooppunt voor randen	M1001
DoelId	Categorie	Optioneel	Doelknooppunt voor randen	M1002
Randtip (optioneel)	Categorie	Nieuw!	Multi-veld tooltip met slim fallback systeem	Meerdere velden ondersteund
Randwaarde	Maatregel	Verbeterd	Stromingsintensiteit voor kruisfiltratie + proportionele breedte	85.0, 150.5, 89.1

⚙️ Uitgebreide configuratiegids

Stap 1: Bereid uw SVG-inhoud voor

SVG-maatregel maken: Zorg ervoor dat je SVG geldige opmaak bevat met unieke id attributen
Wedstrijd ID's: NodeId-waarden moeten overeenkomen met SVG-element id attributen precies
Schone structuur: Gebruik consistente afmetingen en vermijd complexe transformaties
Neutrale kleuren: Gebruik neutrale SVG-kleuren; laat de kleuren over aan het visuele aspect
Randvriendelijk ontwerp: Ontwerp randpaden die goed werken met proportionele breedteschaling

SVG-inhoud = 

"

  <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’/>

"

Stap 2: Visual downloaden en licentie invoegen

📽️ In deze video leer je hoe je de Digital Twin visual downloadt van AppSource en je licentie activeert.

Visueel downloaden: Download de Digital Twin-visual van MS AppSource
Visueel toevoegen: De Digital Twin visual invoegen in je rapport
Licentie invoegen: Plak je licentiesleutel in de Licentie rubriek onder Formatteer je visual

Stap 3: Uw gegevens importeren

📽️ Deze video laat zien hoe je je SVG-lay-out voorbereidt en je gegevenstabel structureert.

Bereid gegevens voor: Maak een enkele gegevenstabel die knooppunten en randen combineert (zie hierboven)
Gegevens importeren: Importeer de SVG (bijv. als .txt) en gegevenstabel (bijv. als csv.) in Power BI-veld

Stap 4: Gegevens verbinden met de visual

📽️ In deze video verbind je je gegevens met de visual en maak je navigatie en interactiviteit met andere visuals mogelijk.

Basisgegevens toepassen: SVG-inhoud, knooppunt-ID en rand-ID-velden slepen in het betreffende deelvenster Visualisaties
Verbeterde gegevens toevoegen: Maatregelen toevoegen aan legenda- en tooltip-velden om de visuele weergave te verrijken
Cross-filtering implementeren: Neem NodeValue- en EdgeValue-maatregelen op om ervoor te zorgen dat filteren werkt in verschillende visuals
Visuele navigatie: Test de visuele navigatiefuncties met zoom, mini-map of mouse-over

Stap 5: Uw knooppunten aanpassen

📽️ Deze video laat zien hoe je voorwaardelijke opmaak kunt toepassen om knooppuntinzichten te benadrukken.

Eenvoudige knooppuntkleuring: Selecteer de gewenste kleur voor elk knooppunt in de Knooppunten rubriek onder Formatteer je visual
Of Conditional-Formatting toepassen: Stel individuele regels in om je knooppunten te kleuren door op het formulepictogram te klikken

Stap 6: Pas je randen aan

📽️ Leer in deze video hoe je stromen en verbindingen duidelijk en dynamisch kunt aanpassen.

(De-)selecteer Verloop: Kleurverloop aan/uit schakelen voor randkleuring
Formaat aanpassen: Ondoorzichtigheid, lijndikte of laagvolgorde aanpassen
Eenvoudig kleuren van randen: Selecteer de gewenste kleur voor elke rand in de Randen rubriek onder Formatteer je visual
Of Conditional-Formatting toepassen: Stel afzonderlijke regels in om je randen te kleuren door op het formulepictogram te klikken

Stap 7: Geavanceerde tooltip maken

📽️ Deze video legt uit hoe je extra context kunt weergeven via mouse-over, met eenvoudige of geavanceerde tooltips.

Basistooltip toepassen: Sleep velden naar de sectie Tooltip om een basistooltip toe te passen
Of Geavanceerde tooltip maken: Maak een aangepaste tooltippagina met grafieken, KPI's en meer
Verbinding maken met Visual: Voeg nodeID of edgeID toe aan het Tooltip-veld

Stap 8: Doorbooroptie ontwikkelen

📽️ Leer in deze video hoe je diepgaande analysepagina's voor knooppunten of randen kunt maken.

Detailpagina maken: Een rapportpagina maken en aangepaste visuals ontwerpen voor gedetailleerde inzichten
Verbinding maken met Visual: Voeg nodeID of edgeID toe aan het doorvoerveld
Test doorboren: Klik met de rechtermuisknop op een knooppunt of rand → Doordrillen om details te bekijken

Stap 9: Geavanceerde voorwaardelijke opmaak toepassen

📽️ In deze video leer je hoe je regelgebaseerde opmaak kunt toepassen met gecombineerde maten voor duidelijkere, prioriteitsgebaseerde knooppunt- en randkleuring.

Gecombineerde maatregel maken: Maak een gecombineerde meting als kolom om meerdere voorwaarden weer te geven (bijv. knooppuntstatus en -type)
Voorwaardelijke opmaak: Voorwaardelijke opmaakregels instellen op basis van de nieuwe gecombineerde maatregel
Legenda invoegen: Voeg hetzelfde veld in als een legende om de duidelijkheid en filtering te verbeteren

Gebruikshandleiding geavanceerde functies

Verbeterde navigatie en zoom ✨

Muis- en aanraakinteracties

Muiswiel: Scroll om in/uit te zoomen met vloeiende animaties
Klik & Sleep: Pannen met visuele cursorfeedback (grijpen/graaien)
Navigatiebediening: De knoppen +, - en home op het scherm gebruiken
Weergave resetten: Klik op de home-knop om soepel terug te keren naar de oorspronkelijke weergave
Navigatie met minimap: Klik op de minimap om naar verschillende gebieden te springen
Viewport bijhouden: Bekijk real-time viewport rechthoek in minimap

Interactief legenda-systeem ✨

Legenda instellen en gebruiken

Setup: Sleep elk categorisch veld naar "Legendekleur (optioneel)".
Kleuren lezen: Legende leest automatisch de werkelijke kleuren van gerenderde knooppunten
Klik om te filteren: Klik op de legenda-items om de corresponderende knooppunten te markeren
Visuele feedback: Geselecteerde categorieën gemarkeerd, andere gedimd
Visueel: Klikken op de legenda activeert filtering in andere visuals
Reset: Klik nogmaals op hetzelfde legenda-item om de markering te wissen

Pro Tip: Perfect om de status te controleren, categorieën te filteren en in één oogopslag te begrijpen wat de kleuren van knooppunten voorstellen.

Proportionele randbreedte ✨

Visualisatie op basis van stroming

Gegevens in kaart brengen: Breng stroomintensiteit/doorvoer in kaart in het veld Randwaarde
Functie inschakelen: Deelvenster Opmaak > Randen > Algemeen > "Proportionele breedte".
Visueel schalen: Randdikte schaalt automatisch mee met gegevenswaarden
Contextueel schalen: Normalisatie per knooppunt toont relatief belang
Knelpunt ID: Direct verbindingen met hoge stroomsnelheid identificeren
Visueel bereik: 1px minimale tot 8px maximale dikte

Zakelijke waarde: Gebruik deze voor operationele dashboards om onmiddellijk knelpunten en verbindingen met hoge doorvoer in uw digitale twin op te sporen.

Verbeterd tooltipsysteem ✨

Flexibele tooltip-configuratie

Knooppunt-tooltips: Gebruik "Sleutel: WaardeKey2: Waarde2" formaat in Knooppunt Tooltip veld
Ondersteuning voor meerdere lijnen: Gebruik \n voor regeleinden in tooltip-inhoud
Rand tooltips: Sleep meerdere velden naar "Rand Tooltip (optioneel)".
Slimme terugval: Automatische basisinfo wanneer geen aangepaste velden zijn opgegeven
Veldlabels: Veldnamen worden automatisch tooltip-labels
Rijke inhoud: Ondersteuning voor operationele context en bedrijfsstatistieken

Geavanceerde kruisfiltering

Driewegfiltersysteem

Tabel ↔ Visueel: Klik op tabelrijen om knooppunten/lijnen te markeren
Legenda ↔ Visueel: Klik op de legende-items om categorieën te markeren
Visueel ↔ Ander beeldmateriaal: Klik op knooppunten/randen om grafieken/tabellen te filteren
Multi-selectie: Ctrl ingedrukt houden en op meerdere elementen klikken
Selectie wissen: Klik op de lege ruimte om alle selecties te resetten
Visuele feedback: Gemarkeerde elementen volledig ondoorzichtig, andere gedimd

⚡ Geavanceerde randbediening

Georganiseerd deelvenster Formaat

Randen Sectie:

Randkleuren (subgroep): Individuele randkleuren en kleurverlopen
⚙️ Algemeen (subgroep): Dekking, weergavevolgorde en proportionele breedte

Beschikbare besturingen:

Randverloop inschakelen: Vloeiende kleurovergangen tussen knooppunten
Proportionele breedte: Op stroming gebaseerde dikteschaling
Ondoorzichtigheid randen: Transparantieregeling (0-100%)
Toon randen op voorgrond: Controle over lagen

🎯 Doorboorinstelling

Doorkijkpagina's maken: Speciale detailpagina's instellen
Filtervelden toevoegen: NodeId/EdgeId opnemen in drill-through filters
Test navigatie: Klik met de rechtermuisknop op knooppunten/lijnen om doorbooropties te zien
Menu Lege Ruimte: Klik met de rechtermuisknop op lege gebieden voor standaard Power BI-menu
Context verifiëren: Zorg ervoor dat gefilterde context correct wordt doorgegeven

Uitgebreide gids voor het oplossen van problemen

Verbeterde navigatieproblemen ✨

Controleer het deelvenster Indeling > Navigatie-instellingen voor zoomregelaars en de zichtbaarheid van de minimap.
Controleer of er voldoende visuele ruimte is voor navigatieknoppen en minimap
Test cursorfeedback tijdens panbewerkingen (moet grijpen/grabbelen tonen)
Zorg ervoor dat minimap viewport rechthoek correct wordt bijgewerkt tijdens zoomen/panelen
Test op verschillende schermformaten voor responsief gedrag

Interactieve legendeproblemen ✨

Controleer of het categorale veld is gesleept naar "Kleur legenda (optioneel)".
Controleer of knooppunten echte kleuren hebben (niet allemaal standaard grijs)
Ervoor zorgen dat categorische gegevens betekenisvolle, schone waarden bevatten
Test de klikfunctionaliteit van de legenda voor markeergedrag
Controleer of de positie van de legenda de visuele hoofdinhoud niet hindert

Problemen met proportionele randbreedte ✨

Schakel de optie "Proportionele breedte" in in het deelvenster Indeling > Randen > Algemeen.
Zorg ervoor dat het veld Edge Value numerieke stroomgegevens bevat
Controleer of EdgeId, SourceId, TargetId correct zijn toegewezen
Controleer of randgegevens een zinvolle variatie in waarden hebben
Test of de dikteschaal visueel correct is

Verbeterde tooltip-problemen ✨

Gebruik "Sleutel: WaardeKey2: Waarde2" formaat voor Knooppunt Tooltip veld
Sleep voor de randtekstvelden naar het gedeelte "Randtekst (optioneel)
Test slimme fallback wanneer geen randtekstvelden zijn opgegeven
Controleer of veldnamen als labels verschijnen in tooltipweergave
Zorg ervoor dat inhoud van meerdere regels wordt weergegeven met de juiste regeleinden

Cross-Filtering werkt niet

Meetvelden Knooppuntwaarde en/of Randwaarde toevoegen
Zorg ervoor dat meetwaarden zijn ingevuld (niet NULL/leeg)
Test beide richtingen: tafel → visueel en visueel → tafel
Test onafhankelijk filteren op basis van legenda
Controleer of selectie highlights activeert (ondoorzichtigheidsveranderingen)
Test eerst met eenvoudige enkelvoudige selectie

Visueel wordt niet weergegeven

Controleer of SVG Content measure geldige SVG-opmaak retourneert
Controleer of het veld NodeId in kaart is gebracht en gegevens bevat
Ervoor zorgen dat SVG-element-ID's exact overeenkomen met NodeId-waarden
SVG-syntax valideren met een online SVG-validator

Knooppunten niet interactief

Bevestig dat de gegevensrol NodeId is ingevuld
Controleer of SVG-elementen overeenkomende id-attributen hebben
Controleer of elementen niet verborgen worden door andere SVG-elementen
Test hover-effecten om elementdetectie te bevestigen

Randen niet zichtbaar

Gegevensrollen EdgeId, SourceId en TargetId in kaart brengen
Zorg ervoor dat SourceId/TargetId-waarden overeenkomen met bestaande NodeId-waarden
Controleer de instelling voor ondoorzichtigheid van de randen (is mogelijk te laag ingesteld)
Controleer de rendervolgorde van randen (voorgrond vs achtergrond)
Test eerst met randkleuren met hoog contrast

🎉 Geavanceerde best practices

Verbeterde gegevensmodellering ✨

Kies zinvolle categorische velden voor interactieve legenda
Structuur tooltips met "Sleutel: Waarde" formaat
Gebruik flowmetriek voor proportionele randbreedte
Zorg voor de juiste NULL afhandeling in UNION structuur
Test met realistische gegevensvolumes

Prestaties en navigatie ✨

Gebruik minimap voor navigatie door grote diagrammen
SVG-complexiteit optimaliseren voor vloeiende zoom/pan
Test proportionele breedte met realistische stroomgegevens
Bewaak geheugengebruik met verbeterde functies
Gebruik maatregelvelden strategisch voor cross-filtering

Gebruikerservaring ✨

Gebruik legendakliks voor filteren op categorie
Tabel filteren combineren met legende filteren
Ontwerp zinvolle tooltip-inhoud
Standaardiseer zoomniveaus en navigatiepatronen
Alle interactieworkflows end-to-end testen

Geavanceerde integratie ✨

Gebruik proportionele breedte voor operationele bewaking
Combineer legendafiltering met tijdreeksanalyse
Verbind stroomgegevens met voorspellende analyses
Uitgebreide multimodale dashboards maken
Integreren met geografische visuals via gedeelde filtering

Klaar om te beginnen? Deze uitgebreide visual transformeert statische diagrammen in interactieve digital twin dashboards met professionele navigatie, intelligente stroomvisualisatie, filteren op categorie en rijke contextuele informatie!