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: Descargar Visual e insertar la licencia

📽️ En este vídeo aprenderás a descargar Digital Twin visual desde AppSource y a activar tu licencia.

Descarga Visual: Descarga el visual Digital Twin de MS AppSource
Añadir Visual: Inserte el visual de Digital Twin en su informe
Insertar licencia: Pegue su clave de licencia en el campo Licencia sección bajo Formatee su visual

Paso 3: Importe sus datos

📽️ Este vídeo muestra cómo preparar el diseño SVG y estructurar la tabla de datos.

Prepare los datos: Crear una única tabla de datos que combine nodos y aristas (véase más arriba)
Importar datos: Importe el SVG (por ejemplo, como .txt) y la tabla de datos (por ejemplo, como csv.) al campo de Power BI

Paso 4: Conectar los datos al visual

📽️ En este vídeo, conectarás tus datos al visual y habilitarás la navegación y la interactividad con otros visuales.

Aplicar datos básicos: Arrastre los campos de contenido SVG, ID de nodo e ID de arista en el panel de visualizaciones correspondiente
Añadir datos mejorados: Añadir medidas a los campos de leyenda y de información sobre herramientas para enriquecer la visual
Aplicar el filtrado cruzado: Incluir medidas NodeValue y EdgeValue para garantizar que el filtrado funciona en todos los visuales.
Navegación visual: Pruebe las funciones de navegación visual mediante los controles de zoom, minimapa o mouse-over.

Paso 5: Personalice sus nodos

📽️ En este vídeo se explica cómo aplicar formato condicional para resaltar información sobre nodos.

Colorear nodos simples: Seleccione el color que prefiera para cada nodo en el menú Nodos sección bajo Formatee su visual
O Aplicar formato condicional: Configure reglas individuales para colorear sus nodos haciendo clic en el icono de fórmula

Paso 6: Personalizar los bordes

📽️ En este vídeo, aprenda a personalizar los flujos y las conexiones de forma clara y dinámica.

(Des)seleccionar Gradiente: Activar/desactivar el degradado para colorear los bordes
Personaliza el formato: Ajuste la opacidad, el ancho de línea o el orden de las capas
Colorear bordes sencillos: Seleccione el color que prefiera para cada borde en Bordes sección bajo Formatee su visual
O Aplicar formato condicional: Configura reglas individuales para colorear tus bordes haciendo clic en el icono de fórmula

Paso 7: Crear Tooltip Avanzado

📽️ En este vídeo se explica cómo mostrar contexto adicional al pasar el ratón por encima, con información sobre herramientas simple o avanzada.

Aplicar información básica sobre herramientas: Arrastre los campos a la sección Información sobre herramientas para aplicar una información sobre herramientas básica
O Crear información sobre herramientas avanzada: Cree una página personalizada de información sobre herramientas con gráficos, indicadores clave de rendimiento y mucho más.
Conecta con Visual: Añadir nodeID o edgeID al campo Tooltip

Paso 8: Desarrollar la opción de perforación

📽️ En este vídeo, aprenda a crear páginas de análisis en profundidad para nodos o aristas.

Crear página detallada: Crear una página de informe y diseñar elementos visuales personalizados para obtener información detallada
Conecta con Visual: Añadir nodeID o edgeID al campo Drillthrough
Prueba de perforación: Haz clic con el botón derecho en un nodo o arista → Desglose para ver los detalles.

Paso 9: Aplicar formato condicional avanzado

📽️ En este vídeo, aprenderá a aplicar un formato basado en reglas utilizando medidas combinadas para una coloración de nodos y aristas más clara y basada en prioridades.

Crear medida combinada: Crear una medida combinada como columna para reflejar múltiples condiciones (por ejemplo, estado y tipo de nodo).
Formato condicional: Establezca reglas de formato condicional basadas en la nueva medida combinada
Insertar leyenda: Insertar el mismo campo como leyenda para mejorar la claridad y el filtrado

🎯 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.