Primeros pasos - Digital Twin Visual

Bienvenido. Esta completa guía le ayudará a empezar a utilizar rápidamente el visual Digital Twin para Power BI, que incluye navegación avanzada, leyenda interactiva, anchura proporcional de los bordes, información sobre herramientas mejorada, filtrado cruzado y funciones de exploración.

📋 Descripción general de las funciones

🔍 Navegación mejorada ✨

Zoom y desplazamiento fluidos con animaciones suaves
Controles profesionales de navegación en pantalla
Minimapa en tiempo real con indicador de ventana gráfica
Respuesta inteligente del cursor (agarrar/agarrar)
Precisión similar a CAD para diagramas de gran tamaño

🎨 Sistema de leyenda interactiva ✨

Leyenda dinámica a partir de los colores reales de los nodos
Haga clic en los elementos de la leyenda para resaltar los nodos
Funciona con cualquier campo categórico
Integración de filtros cruzados
Visualización del recuento de nodos por categoría

📊 Anchura proporcional de los bordes ✨

El grosor de los bordes varía con la intensidad del flujo
Algoritmo de normalización por nodo
Identificación instantánea de cuellos de botella
Activar/desactivar a través del panel de formato
Visualización contextual de flujos

💬 Información sobre herramientas mejorada ✨

Información flexible sobre los nodos "Clave: Información sobre los nodos
Sistema inteligente de información sobre bordes
Soporte multi-campo con nombres de campo
Generación automática de etiquetas
Diseño compatible con versiones anteriores

🔄 Filtrado cruzado avanzado

Filtrado bidireccional con tablas
Resaltado individual de nodos y aristas
Filtrado de categorías basado en leyendas
Soporte multiselección
Modelo de datos mejorado con medidas

🎯 Integración con Power BI

Menús contextuales compatibles con AppSource
Gran capacidad de exploración
Controles organizados del panel de formato
Controles de bordes mejorados con subgrupos
Gestión profesional de la selección

📊 Configuración y requisitos de datos mejorados

⚠️ Importante: Todos los datos deben estar en una sola tabla utilizando una estructura UNION con un manejo adecuado de NULL para un rendimiento óptimo.

Estructura mejorada del modelo de datos

- Estructura de datos mejorada con todas las novedades ✨

SELECCIONE 

    NodeId, 

    Estado: En marchaTipo: Máquina\nTemperatura: 85°C\nEficiencia: 92%' as NodeTooltip,

    'Running' como LegendColor, - Para leyenda interactiva ✨

    NULL como EdgeId, NULL como SourceId, NULL como TargetId, NULL como EdgeTooltip,

    Eficacia como NodeValue, - Para el filtrado cruzado

    NULL como EdgeValue

FROM NodesTable

UNIÓN TODOS

SELECCIONE 

    NULL como NodeId, NULL como NodeTooltip, NULL como LegendColor,

    EdgeId, SourceId, TargetId,

    Tipo: MaterialFlow\nIntensidad: Presión: 2,5 bar' como EdgeTooltip, - Información inteligente sobre herramientas ✨

    NULL como NodeValue,

    FlowIntensity as EdgeValue - Filtrado cruzado + anchura proporcional ✨

FROM EdgesTable

Referencia de funciones de datos mejoradas

Campo	Tipo	Estado	Descripción	Ejemplo
Contenido SVG	Medida	✅ Obligatorio	Marcado SVG que contiene el diagrama del gemelo digital	...
NodeId	Categoría	✅ Obligatorio	Identificador único para cada nodo	M1001, B1201, T1101
Nodo Tooltip	Categoría	✨ Mejorado	"Clave: Valor" formato tooltip multilínea	Estado: En marchaTipo: Máquina: 92%
Color de la leyenda (opcional)	Categoría	✨ ¡Nuevo!	Campo categórico para la generación interactiva de leyendas	Funcionamiento, Mantenimiento, Fuera de línea
Nodo Valor	Medida	🔄 Mejorado	Métricas empresariales para nodos de filtrado cruzado	85.4, 92.1, 79.8
EdgeId	Categoría	❌ Opcional	Identificador único para cada arista	E1001, E1002
SourceId	Categoría	❌ Opcional	Nodo origen de las aristas	M1001
TargetId	Categoría	❌ Opcional	Nodo de destino de las aristas	M1002
Información sobre bordes (opcional)	Categoría	✨ ¡Nuevo!	Información sobre herramientas de campos múltiples con un sistema de retroceso inteligente	Admite varios campos
Valor de borde	Medida	🔄 Mejorado	Intensidad de flujo para filtrado cruzado + anchura proporcional	85.0, 150.5, 89.1

⚙️ Guía completa de configuración

Paso 1: Prepare su contenido SVG

Crear medida SVG: Asegúrese de que su SVG contiene un marcado válido con un único id atributos
Identificadores de partido: Los valores de NodeId deben coincidir con el elemento SVG id atributos exactamente
Estructura limpia: Utilice un dimensionamiento coherente y evite las transformaciones complejas
Colores neutros: Utilice colores SVG neutros; deje que el colorido lo controle el visual
Diseño Edge-Ready: Diseñar recorridos de bordes que funcionen bien con la escala de anchura proporcional

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

"

Paso 2: Configurar Basic Visual

Añadir Visual: Inserte el visual de Digital Twin en su informe
Mapear contenido SVG: Arrastre su medida SVG al campo "Contenido SVG
Mapa NodeId: Arrastre su identificador de nodo al campo "NodeId".
Pruebe la funcionalidad básica: Verificar que los nodos son clicables y que funciona el hover

Paso 3: Activar funciones mejoradas ✨

🎨 Configuración de la leyenda interactiva

Añadir campo de leyenda: Arrastre el campo categórico a "Color de la leyenda (opcional)"
Generación automática: La leyenda lee automáticamente los colores reales de los nodos
Prueba de Interacción: Haga clic en los elementos de la leyenda para resaltar los nodos
Verificar pantalla: Comprobar el recuento de nodos aparece para cada categoría

💬 Configuración mejorada de la información sobre herramientas

Información sobre nodos: Utilice el formato "Clave: Value\nKey2: Value2" en el campo Información sobre nodos.
Información sobre bordes: Arrastrar varios campos a "Información sobre bordes (opcional)"
Contenido de la prueba: Pase el ratón por encima de los nodos/aristas para comprobar la información enriquecida sobre herramientas.
Verifique las etiquetas: Garantizar que los nombres de campo aparezcan como etiquetas de información sobre herramientas

📊 Configuración del ancho de flanco proporcional

Añadir datos de flujo: Asignar valores de caudal/intensidad al campo Valor de borde
Añadir campos de borde: Incluir EdgeId, SourceId, TargetId para la visualización
Activar función: Panel de formato > Bordes > General > Activar "Anchura proporcional"
Escalado de pruebas: Verificar las escalas de grosor de los bordes con los valores de los datos

🔍 Configuración avanzada de navegación

Activar controles: Panel de formato > Navegación > Activar controles de zoom
Activar minimapa: Alternar minimapa para navegar por diagramas grandes
Prueba de navegación: Zoom con la rueda del ratón, panorámica con clic y arrastre
Verifique los comentarios: Comprobar los cambios del cursor durante las operaciones de panorámica

🔄 Configuración avanzada del filtrado cruzado

Añadir campos de medida: Incluir medidas NodeValue y EdgeValue
Crear tablas: Añadir visuales de tabla con los mismos datos para filtrar
Filtrado de tablas de prueba: Haga clic en las filas de la tabla para resaltar los elementos
Prueba de filtrado de leyendas: Haga clic en los elementos de la leyenda para filtrar por categorías
Prueba de filtrado visual: Haz clic en los nodos/aristas para filtrar otros visuales

✅ Configuración completada: Ahora debería disponer de un gemelo digital totalmente interactivo con navegación avanzada, leyenda interactiva, anchura de bordes proporcional, información sobre herramientas mejorada y amplias funciones de filtrado cruzado.

🎯 Guía de uso de funciones avanzadas

🔍 Navegación y zoom mejorados ✨

Interacciones táctiles y con el ratón

Rueda del ratón: Desplácese para acercar/alejar con animaciones suaves
Haz clic y arrastra: Desplazamiento con respuesta visual del cursor (coger/agarrar)
Controles de navegación: Utiliza los botones +, - e inicio en pantalla
Restablecer vista: Haz clic en el botón de inicio para volver a la vista original.
Navegación con minimapa: Haz clic en el minimapa para saltar a distintas zonas
Seguimiento de la ventana gráfica: Ver el rectángulo de la ventana en tiempo real en el minimapa

🎨 Sistema de leyenda interactiva ✨

Configuración y uso de la leyenda

Configuración: Arrastre cualquier campo categórico a "Color de leyenda (opcional)"
Lectura en color: La leyenda lee automáticamente los colores reales de los nodos renderizados
Haz clic para filtrar: Haga clic en los elementos de la leyenda para resaltar los nodos correspondientes
Feedback visual: Categorías seleccionadas resaltadas, otras atenuadas
Visual transversal: Los clics en la leyenda activan el filtrado en otros visuales
Reinicia: Vuelva a hacer clic en el mismo elemento de la leyenda para borrar el resaltado

💡 Consejo profesional: Perfecto para supervisar el estado, filtrar categorías y comprender de un vistazo lo que representan los colores de los nodos.

📊 Anchura proporcional de los bordes ✨

Visualización basada en flujos

Mapeo de datos: Asignar intensidad de flujo/rendimiento al campo Valor de borde
Activar función: Panel de formato > Bordes > General > "Anchura proporcional"
Escalado visual: El grosor de los bordes se ajusta automáticamente a los valores de los datos
Escalado contextual: La normalización por nodo muestra la importancia relativa
Identificación del cuello de botella: Identificación instantánea de conexiones de gran caudal
Alcance visual: Grosor mínimo de 1px y máximo de 8px

💡 Valor empresarial: Utilícelo para que los cuadros de mando operativos detecten inmediatamente los cuellos de botella y las conexiones de alto rendimiento en su gemelo digital.

💬 Sistema Tooltip mejorado ✨

Configuración flexible de la información sobre herramientas

Información sobre nodos: Utilice el formato "Clave: Value\nKey2: Value2" en el campo Información sobre nodos.
Soporte multilínea: Utilizar \n para los saltos de línea en el contenido de la información sobre herramientas
Información sobre bordes: Arrastrar varios campos a "Información sobre bordes (opcional)"
Retroceso inteligente: Información básica automática cuando no se especifican campos personalizados
Etiquetas de campo: Los nombres de los campos se convierten automáticamente en etiquetas
Contenido enriquecido: Apoyo al contexto operativo y a las métricas empresariales

🔄 Filtrado cruzado avanzado

Sistema de filtrado de tres vías

Tabla ↔ Visual: Haga clic en las filas de la tabla para resaltar los nodos/aristas
Leyenda ↔ Visual: Haga clic en los elementos de la leyenda para resaltar las categorías
Visual ↔ Otros visuales: Haga clic en los nodos/borde para filtrar gráficos/tablas
Multiselección: Mantenga pulsada la tecla Ctrl y haga clic en varios elementos
Borrar selección: Haga clic en el espacio vacío para restablecer todas las selecciones
Feedback visual: Elementos destacados con opacidad total, otros atenuados

⚡ Controles de borde avanzados

Panel de formato organizado

📁 Sección de bordes:

🎨 Colores de los bordes (subgrupo): Colores de bordes individuales y controles de degradado
⚙️ General (subgrupo): Opacidad, orden de representación y anchura proporcional

Controles disponibles:

Activar degradado de bordes: Transiciones de color suaves entre nodos
Anchura proporcional: Escalado de espesores basado en el flujo
Opacidad de los bordes: Control de transparencia (0-100%)
Mostrar bordes en primer plano: Control de la estratificación

🎯 Configuración de la perforación

Crear páginas de perforación: Crear páginas detalladas
Añadir campos de filtro: Incluir NodeId/EdgeId en los filtros de perforación
Prueba de navegación: Haga clic con el botón derecho del ratón en los nodos o aristas para ver las opciones de exploración.
Menú Espacio vacío: Haga clic con el botón derecho en áreas vacías para el menú estándar de Power BI
Verificar el contexto: Garantizar que el contexto filtrado se transmite correctamente

🔧 Guía completa para la resolución de problemas

❌ Problemas de navegación mejorados ✨

Comprueba el panel Formato > Ajustes de navegación para los controles de zoom y la visibilidad del minimapa.
Verificar que hay suficiente espacio visual para los controles de navegación y el minimapa.
Probar la respuesta del cursor durante las operaciones de paneo (debe mostrar agarre)
Garantizar que el rectángulo de la ventana gráfica del minimapa se actualice correctamente durante el zoom/paneo.
Prueba en diferentes tamaños de pantalla para comprobar la capacidad de respuesta

❌ Problemas de leyendas interactivas ✨

Verifique que el campo categórico se arrastra a "Color de leyenda (opcional)"
Compruebe que los nodos tienen colores reales (no todos grises por defecto)
Garantizar que los datos categóricos contengan valores significativos y limpios.
Probar la funcionalidad de clic en la leyenda para resaltar el comportamiento
Compruebe que la posición de la leyenda no obstruye el contenido visual principal.

❌ Problemas de anchura proporcional de los bordes ✨

Active la opción "Anchura proporcional" en el panel Formato > Bordes > General
Asegúrese de que el campo Edge Value contiene datos numéricos de flujo
Compruebe que EdgeId, SourceId, TargetId están correctamente asignados.
Verificar que los datos de los bordes presentan una variación significativa de los valores
Comprobar que la escala de grosor es visualmente adecuada

❌ Problemas de información sobre herramientas mejorados ✨

Utilizar "Clave: Value\nKey2: Value2" para el campo Información sobre nodos.
Para la información sobre bordes, arrastre los campos a la sección "Información sobre bordes (opcional)".
Prueba de retroceso inteligente cuando no se especifican campos Edge Tooltip
Comprobar que los nombres de campo aparecen como etiquetas en la información sobre herramientas
Asegúrese de que el contenido multilínea se muestra con los saltos de línea adecuados.

❌ El filtrado cruzado no funciona

Añadir campos de medida de Valor de Nodo y/o Valor de Arista
Asegúrese de que los valores de medida están rellenados (no NULL/vacíos)
Prueba en ambas direcciones: mesa → visual y visual → mesa.
Prueba independiente del filtrado basado en leyendas
Verificar que la selección activa las iluminaciones (cambios de opacidad)
Pruebe primero con una selección simple

❌ Visual no muestra

Compruebe que la medida de contenido SVG devuelve un marcado SVG válido
Verificar que el campo NodeId está mapeado y contiene datos
Garantizar que los ID de los elementos SVG coincidan exactamente con los valores NodeId
Validar la sintaxis SVG mediante un validador SVG en línea

❌ Nodos no interactivos

Confirmar que se ha rellenado el rol de datos NodeId
Comprobar que los elementos SVG tienen atributos id coincidentes
Comprobar que los elementos no están ocultos por otros elementos SVG
Pruebe los efectos hover para confirmar la detección de elementos

❌ No se ven los bordes

Asignar roles de datos EdgeId, SourceId y TargetId
Asegúrese de que los valores SourceId/TargetId coinciden con los valores NodeId existentes.
Compruebe la opacidad de los bordes (puede estar demasiado baja).
Verificación del orden de representación de los bordes (primer plano frente a fondo)
Pruebe primero con colores de borde de alto contraste

🎉 Buenas prácticas avanzadas

Modelado de datos mejorado ✨

Elija campos categóricos significativos para la leyenda interactiva
Estructurar los tooltips utilizando el formato "Clave: Valor".
Utilizar métricas de flujo para la anchura proporcional de los bordes
Garantizar la gestión adecuada de NULL en la estructura UNION
Pruebas con volúmenes de datos realistas

Rendimiento y navegación ✨

Aprovecha el minimapa para navegar por diagramas grandes
Optimizar la complejidad de SVG para un zoom/paneo suaves
Pruebe la anchura proporcional con datos de caudal realistas
Supervise el uso de la memoria con funciones mejoradas
Utilice los campos de medida estratégicamente para el filtrado cruzado

Experiencia de usuario ✨

Utiliza los clics de la leyenda para filtrar por categorías
Combinar el filtrado de tablas con el filtrado de leyendas
Diseñar un contenido útil para la información sobre herramientas
Normalizar los niveles de zoom y los patrones de navegación
Probar todos los flujos de interacción de principio a fin

Integración avanzada ✨

Utilizar la anchura proporcional para la supervisión operativa
Combinar el filtrado de leyendas con el análisis de series temporales
Conecte los datos de flujo con el análisis predictivo
Crear cuadros de mando multimodales completos
Integración con visuales geográficos mediante filtrado compartido

🚀 ¿Listo para empezar? Este completo visual transforma los diagramas estáticos en cuadros de mando interactivos de gemelos digitales con navegación profesional, visualización inteligente de flujos, filtrado basado en categorías y rica información contextual.