Memulai - Visual Kembar Digital

Selamat datang! Panduan komprehensif ini akan membantu Anda dengan cepat memulai dengan visual Digital Twin untuk Power BI, yang menampilkan navigasi tingkat lanjut, legenda interaktif, lebar tepi proporsional, keterangan alat yang disempurnakan, pemfilteran silang, dan kemampuan penelusuran.

📋 Ikhtisar Fitur Komprehensif

🔍 Navigasi yang Disempurnakan ✨

Zoom dan pan yang lancar dengan animasi yang halus
Kontrol navigasi di layar yang profesional
Minimap waktu nyata dengan indikator viewport
Umpan balik kursor pintar (ambil/menangkap)
Presisi seperti CAD untuk diagram besar

🎨 Sistem Legenda Interaktif ✨

Legenda dinamis dari warna simpul yang sebenarnya
Klik item legenda untuk menyorot node
Dapat digunakan dengan bidang kategorikal apa pun
Integrasi penyaringan silang
Tampilan jumlah node per kategori

📊 Lebar Tepi Proporsional ✨

Skala ketebalan tepi dengan intensitas aliran
Algoritma normalisasi per-simpul
Identifikasi kemacetan instan
Mengaktifkan/menonaktifkan melalui panel format
Visualisasi aliran kontekstual

💬 Tip Alat yang Disempurnakan ✨

Fleksibel "Key: Nilai" keterangan alat simpul
Sistem fallback tooltip tepi yang cerdas
Dukungan multi-bidang dengan nama bidang
Pembuatan label otomatis
Desain yang kompatibel ke belakang

🔄 Penyaringan Silang Tingkat Lanjut

Pemfilteran dua arah dengan tabel
Penyorotan simpul/tepi individual
Pemfilteran kategori berbasis legenda
Dukungan multi-pilihan
Model data yang disempurnakan dengan langkah-langkah

🎯 Integrasi Power BI

Menu konteks yang sesuai dengan AppSource
Kemampuan drill-through yang kaya
Kontrol panel format yang terorganisir
Kontrol tepi yang disempurnakan dengan subkelompok
Manajemen seleksi profesional

📊 Pengaturan & Persyaratan Data yang Disempurnakan

⚠️ Penting: Semua data harus berada dalam satu tabel menggunakan struktur UNION dengan penanganan NULL yang tepat untuk kinerja optimal.

Struktur Model Data yang Disempurnakan

- Struktur data yang disempurnakan dengan semua fitur baru ✨

PILIH 

    NodeId, 

    'Status: Berjalan\nJenis: Mesin\nSuhu: 85°C\nEfisiensi: 92%' sebagai NodeTooltip,

    'Running' sebagai LegendColor, - Untuk legenda interaktif ✨

    NULL sebagai EdgeId, NULL sebagai SourceId, NULL sebagai TargetId, NULL sebagai EdgeTooltip,

    Efisiensi sebagai NodeValue, - Untuk penyaringan silang

    NULL sebagai EdgeValue

DARI NodeTable

SERIKAT SEMUA

PILIH 

    NULL sebagai NodeId, NULL sebagai NodeTooltip, NULL sebagai LegendColor,

    EdgeId, SourceId, TargetId,

    'Type: Aliran Material\nIntensitas: Tinggi\nTekanan: 2,5 bar' sebagai EdgeTooltip, - Keterangan alat pintar ✨

    NULL sebagai NodeValue,

    FlowIntensity sebagai EdgeValue - Pemfilteran silang + lebar proporsional ✨

DARI Tabel Tepi

Referensi Peran Data yang Disempurnakan

Bidang	Jenis	Status	Deskripsi	Contoh
Konten SVG	Mengukur	✅ Diperlukan	Markup SVG yang berisi diagram kembar digital	...
NodeId	Kategori	✅ Diperlukan	Pengidentifikasi unik untuk setiap node	M1001, B1201, T1101
Keterangan Alat Node	Kategori	✨ Ditingkatkan	"Key: Nilai" format tooltip multi-baris	Status: Berjalan\nJenis: Mesin\nEfisiensi: 92%
Warna Legenda (opsional)	Kategori	✨ Baru!	Bidang kategorikal untuk pembuatan legenda interaktif	Berjalan, Pemeliharaan, Offline
Nilai Node	Mengukur	🔄 Disempurnakan	Metrik bisnis untuk node penyaringan silang	85.4, 92.1, 79.8
EdgeId	Kategori	❌ Opsional	Pengenal unik untuk setiap sisi	E1001, E1002
SourceId	Kategori	❌ Opsional	Simpul sumber untuk tepi	M1001
TargetId	Kategori	❌ Opsional	Simpul target untuk tepi	M1002
Keterangan Alat Tepi (opsional)	Kategori	✨ Baru!	Tooltip multi-bidang dengan sistem fallback cerdas	Beberapa bidang didukung
Nilai Tepi	Mengukur	🔄 Disempurnakan	Intensitas aliran untuk penyaringan silang + lebar proporsional	85.0, 150.5, 89.1

⚙️ Panduan Konfigurasi Komprehensif

Langkah 1: Siapkan Konten SVG Anda

Membuat Ukuran SVG: Pastikan SVG Anda berisi markup yang valid dengan keunikan id atribut
Cocokkan ID: Nilai NodeId harus sesuai dengan elemen SVG id atribut dengan tepat
Struktur yang bersih: Gunakan ukuran yang konsisten dan hindari transformasi yang rumit
Warna Netral: Gunakan warna SVG yang netral; biarkan pewarnaan kontrol visual
Desain yang siap pakai: Mendesain jalur tepi agar bekerja dengan baik dengan penskalaan lebar yang proporsional

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

"

Langkah 2: Mengkonfigurasi Visual Dasar

Tambahkan Visual: Masukkan visual Digital Twin ke dalam laporan Anda
Memetakan Konten SVG: Seret ukuran SVG Anda ke bidang "Konten SVG"
Peta NodeId: Seret pengenal simpul Anda ke bidang "NodeId"
Menguji Fungsionalitas Dasar: Verifikasi node dapat diklik dan arahkan kursor berfungsi

Langkah 3: Aktifkan Fitur yang Disempurnakan ✨

🎨 Pengaturan Legenda Interaktif

Tambahkan Bidang Legenda: Seret bidang kategori ke "Warna Legenda (opsional)"
Pembangkitan Otomatis: Legenda membaca warna simpul yang sebenarnya secara otomatis
Uji Interaksi: Klik item legenda untuk menyorot node
Verifikasi Tampilan: Periksa jumlah simpul yang muncul untuk setiap kategori

💬 Penyiapan Keterangan Alat yang Disempurnakan

Keterangan Alat Node: Gunakan format "Key: Nilai\nKey2: Nilai2" di bidang Node Tooltip
Keterangan Alat Tepi: Seret beberapa bidang ke "Keterangan Alat Tepi (opsional)"
Konten Tes: Arahkan kursor ke node/tepi untuk memverifikasi keterangan alat yang kaya
Verifikasi Label: Memastikan nama bidang muncul sebagai label keterangan alat

📊 Pengaturan Lebar Tepi Proporsional

Menambahkan Data Aliran: Memetakan nilai throughput/intensitas ke bidang Nilai Tepi
Tambahkan Bidang Tepi: Sertakan EdgeId, SourceId, TargetId untuk visualisasi
Aktifkan Fitur: Panel format > Tepi > Umum > Alihkan "Lebar Proporsional"
Penskalaan Uji: Verifikasi skala ketebalan tepi dengan nilai data

🔍 Pengaturan Navigasi Tingkat Lanjut

Aktifkan Kontrol: Panel format > Navigasi > Aktifkan kontrol zoom
Aktifkan Minimap: Alihkan minimap untuk navigasi diagram besar
Uji Navigasi: Zoom roda mouse, geser klik-seret
Verifikasi Umpan Balik: Memeriksa perubahan kursor selama pengoperasian pan

🔄 Pengaturan Penyaringan Silang Tingkat Lanjut

Tambahkan Bidang Pengukuran: Menyertakan ukuran NodeValue dan EdgeValue
Membuat Tabel: Menambahkan visual tabel dengan data yang sama untuk pemfilteran
Pemfilteran Tabel Uji: Klik baris tabel untuk menyorot elemen
Penyaringan Legenda Uji: Klik item legenda untuk memfilter kategori
Uji Penyaringan Visual: Klik simpul/tepi untuk memfilter visual lainnya

✅ Konfigurasi Selesai: Anda sekarang harus memiliki kembaran digital yang sepenuhnya interaktif dengan navigasi canggih, legenda interaktif, lebar tepi yang proporsional, keterangan alat yang disempurnakan, dan kemampuan penyaringan silang yang komprehensif.

🎯 Panduan Penggunaan Fitur Lanjutan

🔍 Navigasi & Zoom yang Ditingkatkan ✨

Interaksi Mouse & Sentuhan

Mouse Wheel: Gulir untuk memperbesar/memperkecil dengan animasi yang halus
Klik & Seret: Geser ke sekeliling dengan umpan balik kursor visual (ambil/menangkap)
Kontrol Navigasi: Menggunakan tombol +, -, dan home di layar
Atur Ulang Tampilan: Klik tombol home untuk kembali ke tampilan semula dengan mulus
Navigasi Minimap: Klik minimap untuk melompat ke area yang berbeda
Pelacakan Viewport: Menonton persegi panjang viewport waktu nyata di minimap

🎨 Sistem Legenda Interaktif ✨

Pengaturan & Penggunaan Legenda

Setup: Seret bidang kategorikal apa pun ke "Warna Legenda (opsional)"
Membaca Warna: Legenda secara otomatis membaca warna aktual dari node yang dirender
Klik untuk Menyaring: Klik item legenda untuk menyorot node yang sesuai
Umpan Balik Visual: Kategori yang dipilih disorot, kategori lainnya diredupkan
Cross-Visual: Klik legenda memicu pemfilteran di visual lainnya
Atur ulang: Klik item legenda yang sama sekali lagi untuk menghapus penyorotan

💡 Kiat Pro: Sempurna untuk pemantauan status, pemfilteran kategori, dan memahami apa yang diwakili oleh warna simpul secara sekilas.

📊 Lebar Tepi Proporsional ✨

Visualisasi Berbasis Aliran

Pemetaan Data: Memetakan intensitas aliran/throughput ke bidang Nilai Tepi
Aktifkan Fitur: Panel format > Tepi > Umum > "Lebar Proporsional"
Penskalaan Visual: Ketebalan tepi secara otomatis menskalakan dengan nilai data
Penskalaan Kontekstual: Normalisasi per-simpul menunjukkan kepentingan relatif
ID Kemacetan: Mengidentifikasi koneksi aliran tinggi secara instan
Rentang Visual: Ketebalan minimum 1 piksel hingga maksimum 8 piksel

💡 Nilai Bisnis: Gunakan untuk dasbor operasional untuk segera menemukan kemacetan dan koneksi throughput tinggi di digital twin Anda.

💬 Sistem Keterangan Alat yang Disempurnakan ✨

Konfigurasi Tooltip yang Fleksibel

Keterangan Alat Node: Gunakan format "Key: Nilai\nKey2: Nilai2" di bidang Node Tooltip
Dukungan Multi-Baris: Gunakan \n untuk jeda baris dalam konten keterangan alat
Keterangan Alat Tepi: Seret beberapa bidang ke "Keterangan Alat Tepi (opsional)"
Smart Fallback: Info dasar otomatis ketika tidak ada bidang khusus yang ditentukan
Label Lapangan: Nama bidang secara otomatis menjadi label keterangan alat
Konten yang kaya: Dukungan untuk konteks operasional dan metrik bisnis

🔄 Penyaringan Silang Tingkat Lanjut

Sistem Penyaringan Tiga Arah

Tabel ↔ Visual: Klik baris tabel untuk menyorot node/tepi
Legenda ↔ Visual: Klik item legenda untuk menyorot kategori
Visual ↔ Visual Lainnya: Klik node/tepi untuk memfilter bagan/tabel
Multi-Pilihan: Tahan Ctrl dan klik beberapa elemen
Pilihan yang jelas: Klik ruang kosong untuk mengatur ulang semua pilihan
Umpan Balik Visual: Elemen yang disorot memiliki opacity penuh, elemen lainnya diredupkan

⚡ Kontrol Tepi Tingkat Lanjut

Panel Format Teratur

📁 Bagian Tepi:

🎨 Warna Tepi (subkelompok): Warna tepi individual dan kontrol gradien
⚙️ Umum (subkelompok): Opasitas, urutan rendering, dan lebar proporsional

Kontrol yang Tersedia:

Aktifkan Gradien Tepi: Transisi warna yang mulus di antara node
Lebar Proporsional: Penskalaan ketebalan berbasis aliran
Keburaman Tepi: Kontrol transparansi (0-100%)
Tampilkan Tepi di Latar Depan: Kontrol pelapisan

🎯 Pengaturan Drill-Through

Membuat Halaman Drill-Through: Menyiapkan halaman detail khusus
Menambahkan Bidang Filter: Menyertakan NodeId/EdgeId dalam filter penelusuran
Uji Navigasi: Klik kanan node/tepi untuk melihat opsi penelusuran
Menu Ruang Kosong: Klik kanan area kosong untuk menu Power BI standar
Verifikasi Konteks: Memastikan konteks yang difilter diteruskan dengan benar

🔧 Panduan Pemecahan Masalah Komprehensif

❌ Masalah Navigasi yang Disempurnakan ✨

Periksa panel Format > Pengaturan navigasi untuk kontrol zoom dan visibilitas peta mini
Memastikan ruang visual yang cukup untuk kontrol navigasi dan peta minimal
Uji umpan balik kursor selama pengoperasian pan (harus menunjukkan ambil/menangkap)
Memastikan persegi panjang viewport minimap diperbarui dengan benar selama zoom/pan
Menguji pada berbagai ukuran layar untuk mengetahui perilaku responsif

❌ Masalah Legenda Interaktif ✨

Verifikasi bidang kategorikal diseret ke "Warna Legenda (opsional)"
Periksa apakah node memiliki warna yang sebenarnya (tidak semua berwarna abu-abu default)
Memastikan data kategorikal berisi nilai yang bermakna dan bersih
Uji fungsionalitas klik legenda untuk menyoroti perilaku
Verifikasi posisi legenda tidak menghalangi konten visual utama

❌ Masalah Lebar Tepi Proporsional ✨

Aktifkan sakelar "Lebar Proporsional" di panel Format > Tepi > Umum
Pastikan bidang Nilai Tepi berisi data aliran numerik
Periksa apakah EdgeId, SourceId, TargetId dipetakan dengan benar
Verifikasi data tepi memiliki variasi nilai yang berarti
Menguji bahwa penskalaan ketebalan sudah sesuai secara visual

❌ Masalah Tooltip yang Disempurnakan ✨

Gunakan format "Key: Nilai\nKey2: Nilai2" untuk bidang Node Tooltip
Untuk Edge Tooltip, seret bidang ke bagian "Edge Tooltip (opsional)"
Menguji fallback pintar ketika tidak ada bidang Edge Tooltip yang ditentukan
Periksa apakah nama bidang muncul sebagai label pada tampilan tooltip
Memastikan konten multi-baris ditampilkan dengan jeda baris yang tepat

❌ Penyaringan Silang Tidak Berfungsi

Menambahkan bidang ukuran Nilai Node dan/atau Nilai Tepi
Pastikan nilai ukuran terisi (bukan NULL/kosong)
Menguji kedua arah: tabel → visual dan visual → tabel
Menguji pemfilteran berbasis legenda secara mandiri
Verifikasi pemilihan memicu sorotan (perubahan opacity)
Uji dengan pilihan tunggal sederhana terlebih dahulu

❌ Visual Tidak Ditampilkan

Periksa apakah ukuran Konten SVG mengembalikan markup SVG yang valid
Verifikasi bidang NodeId dipetakan dan berisi data
Pastikan ID elemen SVG sama persis dengan nilai NodeId
Memvalidasi sintaks SVG menggunakan validator SVG online

❌ Node Tidak Interaktif

Konfirmasikan peran data NodeId telah terisi
Periksa apakah elemen SVG memiliki atribut id yang cocok
Memverifikasi elemen yang tidak disembunyikan oleh elemen SVG lainnya
Menguji efek hover untuk mengonfirmasi deteksi elemen

❌ Tepi Tidak Tampak

Memetakan peran data EdgeId, SourceId, dan TargetId
Pastikan nilai SourceId/TargetId sesuai dengan nilai NodeId yang ada
Periksa pengaturan opacity tepi (mungkin diatur terlalu rendah)
Verifikasi urutan rendering tepi (latar depan vs latar belakang)
Pertama-tama, uji dengan warna tepi yang sangat kontras.

🎉 Praktik Terbaik Tingkat Lanjut

Pemodelan Data yang Disempurnakan ✨

Memilih bidang kategorikal yang bermakna untuk legenda interaktif
Menyusun keterangan alat menggunakan format "Key: Nilai" dengan format "Key: Nilai
Gunakan metrik aliran untuk lebar tepi yang proporsional
Memastikan penanganan NULL yang tepat dalam struktur UNION
Uji dengan volume data yang realistis

Performa & Navigasi ✨

Memanfaatkan minimap untuk navigasi diagram besar
Mengoptimalkan kompleksitas SVG untuk zoom/pan yang mulus
Menguji lebar proporsional dengan data aliran yang realistis
Memantau penggunaan memori dengan fitur yang disempurnakan
Gunakan bidang pengukuran secara strategis untuk penyaringan silang

Pengalaman Pengguna ✨

Gunakan klik legenda untuk pemfilteran berbasis kategori
Menggabungkan pemfilteran tabel dengan pemfilteran legenda
Merancang konten keterangan alat yang bermakna
Membakukan tingkat zoom dan pola navigasi
Menguji semua alur kerja interaksi dari ujung ke ujung

Integrasi Tingkat Lanjut ✨

Gunakan lebar proporsional untuk pemantauan operasional
Menggabungkan pemfilteran legenda dengan analisis deret waktu
Menghubungkan data aliran dengan analisis prediktif
Membuat dasbor multi-moda yang komprehensif
Integrasikan dengan visual geografis menggunakan pemfilteran bersama

🚀 Siap Memulai? Visual yang komprehensif ini mengubah diagram statis menjadi dasbor kembar digital interaktif dengan navigasi profesional, visualisasi aliran cerdas, pemfilteran berbasis kategori, dan informasi kontekstual yang kaya!