Első lépések - Digital Twin Visual

Üdvözöljük! Ez az átfogó útmutató segít Önnek gyorsan elsajátítani a Power BI Digital Twin vizuális megjelenítését, amely fejlett navigációt, interaktív legendát, arányos szélességű éleket, továbbfejlesztett eszköztípust, keresztszűrést és átfúrási képességeket tartalmaz.

📋 Átfogó funkció áttekintés

🔍 Továbbfejlesztett navigáció ✨

Folyékony zoomolás és pásztázás sima animációkkal
Professzionális képernyőn történő navigációs vezérlés
Valós idejű minimap nézetablak-jelzővel
Intelligens kurzor visszajelzés (megragadás/megragadás)
CAD-szerű pontosság a nagyméretű diagramokhoz

🎨 Interaktív legendarendszer ✨

Dinamikus legenda a tényleges csomópontok színeiből
A csomópontok kiemeléséhez kattintson a legenda elemeire
Bármilyen kategorikus mezővel működik
Kereszt-szűrő integráció
Csomópontok száma kategóriánként

📊 Arányos élszélesség ✨

A peremvastagság az áramlás intenzitásával skálázódik
Csomópontonkénti normalizációs algoritmus
Azonnali szűk keresztmetszetek azonosítása
Be- és kikapcsolás a formátum ablakon keresztül
Kontextuális áramlási vizualizáció

💬 Továbbfejlesztett eszköztárak ✨

Rugalmas "Kulcs: Érték" csomópontok eszköztára
Smart edge tooltip visszalépési rendszer
Több mező támogatása mezőnevekkel
Automatikus címke generálás
Visszafelé kompatibilis kialakítás

🔄 Fejlett kereszt-szűrés

Kétirányú szűrés táblázatokkal
Egyedi csomópont/élek kiemelése
Legenda alapú kategóriaszűrés
Többszörös kiválasztás támogatása
Továbbfejlesztett adatmodell intézkedésekkel

🎯 Power BI integráció

AppSource-kompatibilis kontextus menük
Gazdag átfúrási képességek
Szervezett formátumablak vezérlők
Továbbfejlesztett élvezérlés alcsoportokkal
Szakszerű kiválasztásirányítás

📊 Továbbfejlesztett adatbeállítás és követelmények

⚠️ Fontos: Az optimális teljesítmény érdekében minden adatnak egyetlen táblázatban kell lennie, UNION struktúrát használva, megfelelő NULL kezeléssel.

Továbbfejlesztett adatmodell struktúra

- Továbbfejlesztett adatszerkezet az összes új funkcióval ✨

SELECT 

    NodeId, 

    "Állapot: Status: Running\nType: Hőmérséklet: 85°C\nHatékonyság: 92%' as NodeTooltip,

    'Running' as LegendColor, - Az interaktív legendához ✨

    NULL mint EdgeId, NULL mint SourceId, NULL mint TargetId, NULL mint EdgeTooltip,

    Hatékonyság mint NodeValue, - Kereszt-szűréshez

    NULL mint EdgeValue

FROM NodesTable

UNION ALL

SELECT 

    NULL mint NodeId, NULL mint NodeTooltip, NULL mint LegendColor,

    EdgeId, SourceId, TargetId,

    'Típus: MaterialFlow\nIntenzitás: EdgeTooltip, - Smart tooltipek ✨

    NULL mint NodeValue,

    FlowIntensity as EdgeValue - Kereszt-szűrés + arányos szélesség ✨

FROM EdgesTable

Továbbfejlesztett adatszerepek hivatkozása

Terep	Típus	Állapot	Leírás	Példa
SVG tartalom	Mérés	✅ Kötelező	A digitális ikerdiagramot tartalmazó SVG jelölés	...
NodeId	Kategória	✅ Kötelező	Egyedi azonosító minden egyes csomóponthoz	M1001, B1201, T1101
Node Tooltip	Kategória	✨ Továbbfejlesztett	"Kulcs: Érték" többsoros tooltip formátum	Állapot: Típus: Futó\nType: Hatékonyság: 92%
Legenda színe (opcionális)	Kategória	✨ Új!	Kategorikus mező az interaktív legenda generálásához	Futás, karbantartás, Offline
Csomópont Érték	Mérés	🔄 Továbbfejlesztett	Üzleti mérőszámok a csomópontok keresztszűréséhez	85.4, 92.1, 79.8
EdgeId	Kategória	❌ Választható	Egyedi azonosító minden egyes élhez	E1001, E1002
SourceId	Kategória	❌ Választható	Az élek forráscsomópontja	M1001
TargetId	Kategória	❌ Választható	Az élek célcsomópontja	M1002
Edge Tooltip (opcionális)	Kategória	✨ Új!	Többmezős tooltip intelligens visszalépési rendszerrel	Több mező támogatása
Él érték	Mérés	🔄 Továbbfejlesztett	Áramlási intenzitás keresztszűréshez + arányos szélesség	85.0, 150.5, 89.1

⚙️ Átfogó konfigurációs útmutató

1. lépés: Készítse elő az SVG tartalmát

Létrehozása SVG Measure: Győződjön meg róla, hogy az SVG érvényes jelölést tartalmaz egyedi id attribútumok
Match ID-k: A NodeId értékeknek meg kell egyezniük az SVG elemmel id attribútumok pontosan
Tiszta szerkezet: Használjon következetes méretezést és kerülje az összetett transzformációkat
Semleges színek: Használjon semleges SVG színeket; hagyja, hogy a vizuális színezés irányítsa a színezést.
Edge-Ready kialakítás: Tervezze meg az élpályákat úgy, hogy azok jól működjenek az arányos szélesség skálázással együtt

SVG tartalom = 

"

  <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
Add Visual: Illessze be a Digital Twin képanyagot a jelentésébe
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)
Feltételes formázás: 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

🎯 Speciális funkciók használati útmutatója

🔍 Továbbfejlesztett navigáció és zoom ✨

Egér és érintés kölcsönhatások

Egérkerék: Görgetés a nagyításhoz/ kicsinyítéshez sima animációkkal
Kattintás és húzás: Pásztázás vizuális kurzor visszajelzéssel (megragadás/megragadás)
Navigációs vezérlők: A képernyőn megjelenő +, - és home gombok használata
Nézet visszaállítása: Kattintson a home gombra az eredeti nézethez való zökkenőmentes visszatéréshez
Minimap navigáció: Kattintson a minimapra a különböző területekre való ugráshoz
Nézőablak követés: Nézze a valós idejű nézetablak téglalapot a minimapban

🎨 Interaktív legendarendszer ✨

Legenda beállítása és használata

Beállítás: Húzza bármelyik kategorikus mezőt a "Legenda színe (opcionális)" mezőbe.
Színes olvasás: A legenda automatikusan kiolvassa a tényleges színeket a renderelt csomópontokból
Kattintson a szűrésre: Kattintson a legenda elemekre a megfelelő csomópontok kiemeléséhez
Vizuális visszajelzés: Kijelölt kategóriák kiemelve, mások elhalványítva
Cross-Visual: A legenda kattintás kiváltja a szűrést más vizuális elemekben
Újraindítás: Kattintson újra ugyanarra a legendaelemre a kiemelés törléséhez

💡 Pro tipp: Tökéletes az állapotfigyeléshez, a kategóriaszűréshez és annak megértéséhez, hogy a csomópontok színei mit jelentenek egy pillantással.

📊 Arányos élszélesség ✨

Áramlás-alapú vizualizáció

Adattérképezés: Áramlási intenzitás/átbocsátás leképezése az Edge Value mezőre
Funkció engedélyezése: Formátum ablaktábla > Élek > Általános > "Arányos szélesség"
Vizuális méretezés: Az élvastagság automatikusan skálázódik az adatértékekkel
Kontextuális skálázás: A csomópontonkénti normalizálás a relatív fontosságot mutatja
Szűk keresztmetszet azonosító: Azonnali azonosítása a nagy áramlású csatlakozásoknak
Látótávolság: 1px minimális és 8px maximális vastagság között

💡 Üzleti érték: Használja operatív műszerfalakhoz, hogy azonnal észrevegye a szűk keresztmetszeteket és a nagy átviteli kapacitású kapcsolatokat a digitális ikrekben.

💬 Továbbfejlesztett Tooltip rendszer ✨

Rugalmas Tooltip konfiguráció

Node Tooltips: Használja a "Kulcs: Érték\nKulcs2: Érték2" formátumban a Node Tooltip mezőben
Többvonalas támogatás: \n használata a sorkizárásokhoz a tooltip tartalmában
Edge Tooltips: Húzza több mezőt az "Edge Tooltip (opcionális)" mezőbe.
Smart Fallback: Automatikus alapinformáció, ha nincsenek egyéni mezők megadva
Mezőcímkék: A mezőnevek automatikusan tooltip címkékké válnak
Gazdag tartalom: Az operatív kontextus és az üzleti mérőszámok támogatása

🔄 Fejlett kereszt-szűrés

Háromutas szűrőrendszer

Táblázat ↔ Vizuális: Kattintson a táblázat soraira a csomópontok/élek kiemeléséhez.
Legenda ↔ Vizuális: Kattintson a legenda elemekre a kategóriák kiemeléséhez
Vizuális ↔ Egyéb vizuális eszközök: Kattintson a csomópontokra/élekre a diagramok/táblák szűréséhez
Többszörös kiválasztás: Tartsa lenyomva a Ctrl billentyűt és kattintson több elemre
Tiszta kiválasztás: Kattintson az üres helyre az összes kiválasztás visszaállításához
Vizuális visszajelzés: Kiemelt elemek teljes átlátszatlanság, mások halványítva

⚡ Fejlett élvezérlés

Szervezett formátum ablak

📁 Szélek szakasz:

🎨 Szélek színei (alcsoport): Egyedi élszínek és gradiens vezérlők
⚙️ Általános (alcsoport): Átlátszatlanság, renderelési sorrend és arányos szélesség

Elérhető vezérlők:

Él gradiens engedélyezése: Sima színátmenetek a csomópontok között
Arányos szélesség: Áramlás alapú vastagságskálázás
Szélek átlátszatlansága: Átlátszóság-szabályozás (0-100%)
Élek megjelenítése az előtérben: Rétegezésvezérlés

🎯 Átfúrás beállítása

Átfúrható oldalak létrehozása: Dedikált részletes oldalak létrehozása
Szűrőmezők hozzáadása: NodeId/EdgeId felvétele a drill-through szűrőkbe
Teszt navigáció: Kattintson a jobb gombbal a csomópontokra/élekkel a fúrási lehetőségek megtekintéséhez
Üres tér menü: Kattintson a jobb gombbal az üres területekre a szabványos Power BI menühöz
Ellenőrizze a kontextust: Biztosítani kell, hogy a szűrt kontextus helyesen kerüljön átadásra

🔧 Átfogó hibaelhárítási útmutató

❌ Továbbfejlesztett navigációs problémák ✨

Ellenőrizze a Formátum ablaktábla > Navigációs beállítások a zoomvezérlők és a minimap láthatóságának ellenőrzését.
Ellenőrizze, hogy elegendő vizuális tér áll-e rendelkezésre a navigációs kezelőszervek és a minimap számára.
Tesztelje a kurzor visszajelzését pásztázási műveletek közben (a megragadást/megragadást kell mutatnia)
A minimap nézetablak téglalapjának helyes frissítése zoomolás/panoráma alatt
Tesztelje különböző képernyőméreteken a reszponzív viselkedést

❌ Interaktív legendás problémák ✨

Ellenőrizze, hogy a kategorikus mezőt a "Legenda színe (opcionális)" mezőre húzza.
Ellenőrizze, hogy a csomópontok tényleges színekkel rendelkeznek-e (nem mind alapértelmezett szürke).
Biztosítani kell, hogy a kategorikus adatok értelmes, tiszta értékeket tartalmazzanak.
A legendára kattintás funkció tesztelése a kiemelési viselkedéshez
Ellenőrizze, hogy a legenda elhelyezése nem akadályozza a fő vizuális tartalmat

❌ Arányos élszélesség problémák ✨

Az "Arányos szélesség" kapcsoló bekapcsolása a Formátum ablaktábla > Élek > Általános menüpontban.
Biztosítani kell, hogy az Edge Value mező numerikus áramlási adatokat tartalmazzon.
Ellenőrizze, hogy az EdgeId, SourceId, TargetId megfelelően van-e leképezve.
Ellenőrizze, hogy az élek adatai értelmes értékvariációval rendelkeznek-e
A vastagság méretezés vizuálisan megfelelőségének vizsgálata

❌ Továbbfejlesztett Tooltip problémák ✨

Használja a "Kulcs: Value\nKey2: Value2" formátumot a Node Tooltip mezőhöz.
Az Edge Tooltip esetében húzza a mezőket az "Edge Tooltip (opcionális)" szakaszba.
Intelligens visszaesés tesztelése, ha nincsenek Edge Tooltip mezők megadva
Ellenőrizze, hogy a mezőnevek címkeként jelennek-e meg az eszköztip-kijelzésben
A többsoros tartalom megfelelő sortörésekkel történő megjelenítésének biztosítása

❌ A kereszt-szűrés nem működik

Csomópontérték és/vagy élérték mérőmezők hozzáadása
Biztosítani kell, hogy a mérési értékek kitöltöttek legyenek (nem NULL/üres).
Mindkét irányt teszteljük: táblázat → vizuális és vizuális → táblázat.
A legenda alapú szűrés független tesztelése
Ellenőrizze, hogy a kijelölés kiváltja-e a kiemeléseket (opacitásváltozás)
Először egyszerű egyszemélyes kiválasztással teszteljen

❌ Vizuális nem jelenik meg

Ellenőrizze, hogy az SVG Content measure érvényes SVG jelölést ad vissza
Ellenőrizze, hogy a NodeId mező leképezve van-e és tartalmaz-e adatokat
Biztosítani kell, hogy az SVG elemazonosítók pontosan megegyezzenek a NodeId értékekkel
SVG szintaxis hitelesítése online SVG validátorral

❌ Nem interaktív csomópontok

A NodeId adatszerep betöltésének megerősítése
Ellenőrizze, hogy az SVG elemek rendelkeznek-e megfelelő id attribútumokkal
Ellenőrizze, hogy az elemeket nem rejtik el más SVG elemek
Tesztelje a lebegőhatásokat az elemfelismerés megerősítésére

❌ A szélek nem jelennek meg

EdgeId, SourceId és TargetId adatszerepek leképezése
A SourceId/TargetId értékek egyezőségének biztosítása a meglévő NodeId értékekkel
Ellenőrizze az élek átlátszatlanságának beállítását (lehet, hogy túl alacsonyan van beállítva).
Az élek renderelési sorrendjének ellenőrzése (előtér vs. háttér)
Először nagy kontrasztú peremszínekkel teszteljen

🎉 Fejlett legjobb gyakorlatok

Továbbfejlesztett adatmodellezés ✨

Válasszon értelmes kategorikus mezőket az interaktív legendához
Szerkezeti tooltipek a "Kulcs: Érték" formátumban
Áramlási metrikák használata az arányos élszélességhez
A NULL megfelelő kezelésének biztosítása az UNION struktúrában
Tesztelés reális adatmennyiséggel

Teljesítmény és navigáció ✨

A minimap kihasználása a nagyméretű diagramok navigálásához
SVG komplexitás optimalizálása a sima zoom/panzió érdekében
Az arányos szélesség tesztelése reális áramlási adatokkal
A memóriahasználat felügyelete továbbfejlesztett funkciókkal
Használja az intézkedésmezőket stratégiailag a keresztszűréshez

Felhasználói élmény ✨

A legenda kattintások használata kategória alapú szűréshez
Táblázatszűrés kombinálása legendaszűréssel
Értelmes tooltip tartalom tervezése
Nagyítási szintek és navigációs minták szabványosítása
Minden interakciós munkafolyamat végponttól végpontig történő tesztelése

Fejlett integráció ✨

Arányos szélesség használata az operatív felügyelethez
A legendaszűrés kombinálása idősor-elemzéssel
Az áramlási adatok összekapcsolása a prediktív analitikával
Átfogó multimodális műszerfalak létrehozása
Integráció a földrajzi vizuális elemekkel a megosztott szűrés segítségével

🚀 Készen állsz az indulásra? Ez az átfogó látványterv a statikus diagramokat interaktív digitális iker műszerfalakká alakítja át, professzionális navigációval, intelligens áramlási vizualizációval, kategória alapú szűréssel és gazdag kontextuális információkkal!