Introdução - Digital Twin Visual

Bem-vindo! Este guia completo ajudá-lo-á a começar rapidamente a utilizar o visual Digital Twin para o Power BI, com navegação avançada, legenda interactiva, largura de margem proporcional, dicas de ferramentas melhoradas, filtragem cruzada e capacidades de pesquisa.

Visão global das funcionalidades

🔍 Navegação melhorada ✨

Zoom e panorâmica fluidos com animações suaves
Controlos profissionais de navegação no ecrã
Minimapa em tempo real com indicador de janela de visualização
Feedback inteligente do cursor (agarrar/agarrar)
Precisão semelhante à do CAD para diagramas de grandes dimensões

Sistema de legenda interactiva 🎨 ✨

Legenda dinâmica a partir das cores reais dos nós
Clique nos itens da legenda para realçar os nós
Funciona com qualquer campo categórico
Integração de filtragem cruzada
Visualização da contagem de nós por categoria

📊 Largura proporcional do bordo ✨

A espessura dos bordos é proporcional à intensidade do fluxo
Algoritmo de normalização por nó
Identificação instantânea de estrangulamentos
Ativar/desativar através do painel de formatação
Visualização de fluxo contextual

Dicas de ferramentas melhoradas ✨

Dicas flexíveis do nó "Chave: Dicas de ferramentas do nó "Valor" flexíveis
Sistema inteligente de recurso à dica de ferramenta da borda
Suporte para vários campos com nomes de campos
Geração automática de etiquetas
Design compatível com versões anteriores

Filtragem cruzada avançada

Filtragem bidirecional com tabelas
Realce individual de nó/borda
Filtragem de categorias baseada em legendas
Suporte de seleção múltipla
Modelo de dados melhorado com medidas

🎯 Integração do Power BI

Menus de contexto compatíveis com AppSource
Capacidades de pesquisa avançadas
Controlos organizados do painel de formatação
Controlos de extremidade melhorados com subgrupos
Gestão da seleção profissional

Configuração e requisitos de dados melhorados

⚠️ Importante: Todos os dados devem estar numa única tabela utilizando uma estrutura UNION com um tratamento NULL adequado para um desempenho ótimo.

Estrutura do modelo de dados melhorado

- Estrutura de dados melhorada com todas as novas funcionalidades ✨

SELECCIONAR 

    NodeId, 

    'Estado: Em execução\nTipo: Machine\nTemperature: 85°C\nEfficiency: 92%' as NodeTooltip,

    'Running' as LegendColor, - Para a legenda interactiva ✨

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

    Eficiência como NodeValue, - Para filtragem cruzada

    NULL como EdgeValue

FROM NodesTable

UNIÃO TODOS

SELECCIONAR 

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

    EdgeId, SourceId, TargetId,

    'Tipo: MaterialFlow\nIntensity: High\nPressure: 2.5 bar' como EdgeTooltip, - Dicas de ferramentas inteligentes ✨

    NULL como NodeValue,

    FlowIntensity as EdgeValue - Filtragem cruzada + largura proporcional ✨

FROM EdgesTable

Referência das funções de dados melhoradas

Campo	Tipo	Estado	Descrição	Exemplo
Conteúdo SVG	Medida	✅ Necessário	Marcação SVG que contém o diagrama de gémeo digital	...
NodeId	Categoria	✅ Necessário	Identificador único para cada nó	M1001, B1201, T1101
Dica de ferramenta de nó	Categoria	✨ Melhorado	"Chave: Valor" formato de dica de ferramenta de várias linhas	Estado: Em funcionamento\nTipo: Máquina\nEficiência: 92%
Cor da legenda (opcional)	Categoria	✨ Novo!	Campo categórico para geração interactiva de legendas	Funcionamento, manutenção, offline
Valor do nó	Medida	🔄 Melhorado	Métricas comerciais para nós de filtragem cruzada	85.4, 92.1, 79.8
EdgeId	Categoria	Opcional	Identificador único para cada aresta	E1001, E1002
SourceId	Categoria	Opcional	Nó de origem das arestas	M1001
TargetId	Categoria	Opcional	Nó de destino para arestas	M1002
Dica de ferramenta de borda (opcional)	Categoria	✨ Novo!	Dica de ferramenta para vários campos com sistema de recurso inteligente	Suporte para vários campos
Valor de borda	Medida	🔄 Melhorado	Intensidade do fluxo para filtragem cruzada + largura proporcional	85.0, 150.5, 89.1

⚙️ Guia de configuração abrangente

Passo 1: Preparar o conteúdo SVG

Criar medida SVG: Certifique-se de que o seu SVG contém uma marcação válida com id atributos
IDs de correspondência: Os valores NodeId devem corresponder ao elemento SVG id atributos exactos
Estrutura limpa: Utilizar um dimensionamento consistente e evitar transformações complexas
Cores neutras: Utilize cores SVG neutras; deixe o visual controlar a coloração
Design preparado para bordas: Conceber caminhos de extremidade para funcionarem bem com a escala de largura proporcional

Conteúdo 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’/>

"

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
Adicionar visual: Inserir o visual Digital Twin no seu relatório
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)
Formatação condicional: 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

🎯 Guia de utilização de funções avançadas

🔍 Navegação e zoom melhorados ✨

Interações entre o rato e o toque

Roda do rato: Deslocação para aumentar/reduzir o zoom com animações suaves
Clicar e arrastar: Deslocação panorâmica com feedback visual do cursor (agarrar/apanhar)
Controlos de navegação: Utilizar os botões +, - e Início no ecrã
Repor a vista: Clique no botão de início para regressar suavemente à vista original
Navegação por minimapa: Clique no minimapa para saltar para diferentes áreas
Seguimento da janela de visualização: Ver o retângulo da janela de visualização em tempo real no minimapa

Sistema de legenda interactiva 🎨 ✨

Configuração e utilização da legenda

Instalação: Arraste qualquer campo categórico para "Cor da legenda (opcional)"
Leitura de cores: A legenda lê automaticamente as cores reais dos nós processados
Clique para filtrar: Clique nos itens da legenda para realçar os nós correspondentes
Feedback visual: Categorias selecionadas destacadas, outras esbatidas
Transversal: Os cliques na legenda accionam a filtragem noutros visuais
Reiniciar: Clique novamente no mesmo item de legenda para limpar o realce

💡 Dica profissional: Perfeito para monitorização do estado, filtragem de categorias e compreensão do que as cores dos nós representam num relance.

📊 Largura proporcional do bordo ✨

Visualização baseada em fluxo

Mapeamento de dados: Mapear a intensidade/rendimento do fluxo para o campo Edge Value
Ativar a funcionalidade: Painel de formatação > Arestas > Geral > "Largura proporcional"
Dimensionamento visual: A espessura do rebordo é automaticamente ajustada aos valores dos dados
Escalonamento contextual: A normalização por nó mostra a importância relativa
ID do estrangulamento: Identificar instantaneamente ligações de elevado caudal
Alcance visual: Espessura mínima de 1px a máxima de 8px

Valor comercial: Utilize painéis de controlo operacionais para detetar imediatamente estrangulamentos e ligações de elevado débito no seu gémeo digital.

Sistema de dicas de ferramentas melhorado 💬

Configuração flexível de dicas de ferramentas

Dicas de nós: Utilizar o formato "Key: Valor\nChave2: Valor2" no campo Dica de ferramenta do nó
Suporte multi-linha: Utilizar \n para quebras de linha no conteúdo da dica de ferramenta
Dicas de ferramentas de borda: Arrastar vários campos para "Sugestão de ferramenta de margem (opcional)"
Recuo inteligente: Informação básica automática quando não são especificados campos personalizados
Etiquetas de campo: Os nomes dos campos tornam-se automaticamente etiquetas de dicas de ferramentas
Conteúdo rico: Apoio ao contexto operacional e às métricas empresariais

Filtragem cruzada avançada

Sistema de filtragem de três vias

Tabela ↔ Visual: Clique nas linhas da tabela para realçar nós/arestas
Legenda ↔ Visual: Clique nos itens da legenda para realçar as categorias
Visual ↔ Outros Visuais: Clique em nós/arestas para filtrar gráficos/tabelas
Multi-Seleção: Mantenha premida a tecla Ctrl e clique em vários elementos
Limpar seleção: Clique no espaço vazio para repor todas as selecções
Feedback visual: Elementos realçados com opacidade total, outros esbatidos

Controlos de extremidade avançados

Painel de formato organizado

📁 Secção das arestas:

Cores dos bordos (subgrupo): Controlos individuais de cores de margens e gradientes
⚙️ Geral (subgrupo): Opacidade, ordem de apresentação e largura proporcional

Controlos disponíveis:

Ativar o gradiente de margem: Transições de cor suaves entre nós
Largura proporcional: Escalonamento da espessura com base no fluxo
Opacidade do rebordo: Controlo da transparência (0-100%)
Mostrar arestas em primeiro plano: Controlo de camadas

🎯 Configuração de perfuração

Crie páginas de perfuração: Criar páginas de pormenor dedicadas
Adicionar campos de filtro: Incluir NodeId/EdgeId em filtros de pesquisa
Teste de navegação: Clique com o botão direito do rato em nós/arestas para ver as opções de pesquisa
Menu Espaço vazio: Clique com o botão direito do rato em áreas vazias para o menu padrão do Power BI
Verificar o contexto: Assegurar que o contexto filtrado é transmitido corretamente

Guia completo de resolução de problemas

Problemas de navegação melhorados ✨

Verificar o painel Formato > Definições de navegação para controlos de zoom e visibilidade do minimapa
Verificar se existe espaço visual suficiente para os controlos de navegação e o minimapa
Testar a reação do cursor durante as operações de panorâmica (deve mostrar o agarrar/agarrar)
Garantir que o retângulo da janela de visualização do minimapa é atualizado corretamente durante o zoom/pan
Teste em diferentes tamanhos de ecrã para verificar o comportamento responsivo

Problemas interactivos da legenda ❌ Problemas interactivos da legenda ✨

Verificar se o campo categórico é arrastado para "Cor da legenda (opcional)"
Verificar se os nós têm cores reais (não são todos cinzentos por defeito)
Assegurar que os dados categóricos contêm valores significativos e limpos
Testar a funcionalidade de clique na legenda para o comportamento de realce
Verificar se o posicionamento da legenda não obstrui o conteúdo visual principal

Questões relativas à largura proporcional dos bordos ❌

Ativar a opção "Largura proporcional" no painel Formato > Arestas > Geral
Assegurar que o campo Edge Value contém dados de fluxo numéricos
Verificar se o EdgeId, o SourceId e o TargetId estão corretamente mapeados
Verificar se os dados de borda têm uma variação significativa nos valores
Testar se a escala de espessura é visualmente adequada

❌ Problemas de dicas de ferramentas melhorados ✨

Utilizar o formato "Key: Valor\nChave2: Valor2" para o campo Dica de ferramenta do nó
Para a Sugestão de ferramenta de rebordo, arraste os campos para a secção "Sugestão de ferramenta de rebordo (opcional)
Teste o fallback inteligente quando nenhum campo de dica de ferramenta de borda é especificado
Verificar se os nomes dos campos aparecem como etiquetas no ecrã de dicas de ferramentas
Assegurar que o conteúdo de várias linhas é apresentado com as devidas quebras de linha

A filtragem cruzada não está a funcionar

Adicionar campos de medida Valor do nó e/ou Valor da aresta
Assegurar que os valores das medidas são preenchidos (não NULL/vazios)
Teste em ambas as direcções: tabela → visual e visual → tabela
Testar a filtragem baseada em legendas de forma independente
Verificar se a seleção desencadeia realces (alterações de opacidade)
Teste primeiro com uma seleção única simples

A imagem não é apresentada

Verificar se a Medida de conteúdo SVG devolve uma marcação SVG válida
Verificar se o campo NodeId está mapeado e contém dados
Garantir que os IDs dos elementos SVG correspondem exatamente aos valores NodeId
Validar a sintaxe SVG utilizando um validador SVG online

Nós não interactivos

Confirmar que a função de dados NodeId está preenchida
Verificar se os elementos SVG têm atributos id correspondentes
Verificar se os elementos não estão ocultos por outros elementos SVG
Testar efeitos de pairar para confirmar a deteção de elementos

Bordos não visíveis

Mapear as funções de dados EdgeId, SourceId e TargetId
Assegurar que os valores SourceId/TargetId correspondem aos valores NodeId existentes
Verificar a definição da opacidade dos bordos (pode estar demasiado baixa)
Verificar a ordem de renderização dos bordos (primeiro plano vs fundo)
Teste primeiro com cores de bordos de alto contraste

Melhores práticas avançadas

Modelação de dados melhorada ✨

Escolha campos categóricos significativos para a legenda interactiva
Estruturar as dicas de ferramentas utilizando o formato "Chave: Valor".
Utilizar métricas de fluxo para a largura proporcional da aresta
Assegurar o tratamento correto de NULL na estrutura UNION
Teste com volumes de dados realistas

Desempenho e navegação ✨

Utilizar o minimapa para navegação em diagramas grandes
Otimizar a complexidade do SVG para um zoom/pan suave
Testar a largura proporcional com dados de caudal realistas
Monitorizar a utilização da memória com funcionalidades melhoradas
Utilizar campos de medida estrategicamente para filtragem cruzada

Experiência do utilizador ✨

Utilizar cliques na legenda para filtragem baseada em categorias
Combinar a filtragem de tabelas com a filtragem de legendas
Conceber conteúdos significativos para as dicas de ferramentas
Normalizar os níveis de zoom e os padrões de navegação
Testar todos os fluxos de trabalho de interação de ponta a ponta

Integração avançada ✨

Utilizar a largura proporcional para monitorização operacional
Combinar a filtragem de legendas com a análise de séries temporais
Ligue os dados de fluxo à análise preditiva
Criar painéis de controlo multimodais abrangentes
Integrar com visuais geográficos utilizando filtragem partilhada

🚀 Pronto para começar? Este visual abrangente transforma diagramas estáticos em painéis gémeos digitais interactivos com navegação profissional, visualização inteligente de fluxos, filtragem baseada em categorias e informações contextuais ricas!