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

"

Passo 2: Descarregar o Visual e inserir a licença

📽️ Neste vídeo, aprenderá a transferir o visual Digital Twin a partir do AppSource e a ativar a sua licença.

Descarregar Visual: Descarregar o visual Digital Twin do MS AppSource
Adicionar visual: Inserir o visual Digital Twin no seu relatório
Inserir licença: Cole sua chave de licença no campo Licença secção em Formatar o seu visual

Passo 3: Importar os seus dados

📽️ Este vídeo mostra como preparar o seu esquema SVG e estruturar a sua tabela de dados.

Preparar dados: Criar uma tabela de dados única que combine nós e arestas (ver acima)
Importar dados: Importar o SVG (por exemplo, como .txt) e a tabela de dados (por exemplo, como csv.) para o campo do Power BI

Passo 4: Ligar os dados ao Visual

📽️ Neste vídeo, irá ligar os seus dados ao visual e permitir a navegação e a interatividade com outros visuais.

Aplicar dados de base: Arraste os campos de conteúdo SVG, ID do nó e ID da aresta no respetivo painel Visualizações
Adicionar dados melhorados: Adicionar medidas à legenda e aos campos de dicas de ferramentas para enriquecer o visual
Implementar filtragem cruzada: Incluir medidas NodeValue e EdgeValue para garantir que a filtragem funciona em todos os visuais
Navegação visual: Testar as funcionalidades de navegação visual utilizando controlos de zoom, mini-mapa ou passagem do rato

Passo 5: Personalizar os nós

📽️ Este vídeo explica como aplicar a formatação condicional para realçar as informações do nó.

Coloração simples de nós: Selecione a sua cor preferida para cada nó no Nós secção em Formatar o seu visual
Ou Aplicar formatação condicional: Configure regras individuais para colorir os seus nós, clicando no ícone de fórmula

Passo 6: Personalizar os cantos

📽️ Neste vídeo, saiba como personalizar fluxos e ligações de forma clara e dinâmica.

(Des)selecionar Gradiente: Ativar/desativar o gradiente para colorir as arestas
Personalizar o formato: Ajustar a opacidade, a largura da linha ou a ordem das camadas
Coloração de bordos simples: Selecione a sua cor preferida para cada aresta no Arestas secção em Formatar o seu visual
Ou Aplicar formatação condicional: Configure regras individuais para colorir as suas arestas clicando no ícone de fórmula

Etapa 7: Criar dica de ferramenta avançada

📽️ Este vídeo explica como apresentar contexto extra através do rato, com dicas de ferramentas simples ou avançadas.

Aplicar dica de ferramenta básica: Arraste campos para a secção Tooltip para aplicar uma tooltip básica
Ou Criar dica de ferramenta avançada: Criar uma página de dica de ferramenta personalizada com gráficos, KPIs e muito mais
Ligar ao Visual: Adicionar nodeID ou edgeID ao campo Tooltip

Etapa 8: Desenvolver a opção de perfuração

📽️ Neste vídeo, saiba como criar páginas de análise aprofundada para nós ou arestas.

Criar página de detalhes: Criar uma página de relatório e conceber visuais personalizados para obter informações detalhadas
Ligar ao Visual: Adicionar nodeID ou edgeID ao campo Drillthrough
Teste de perfuração: Clique com o botão direito do rato num nó ou numa aresta → Explorar para ver detalhes

Passo 9: Aplicar a formatação condicional avançada

📽️ Neste vídeo, aprenderá a aplicar formatação baseada em regras utilizando medidas combinadas para uma coloração mais clara e baseada em prioridades de nós e arestas.

Criar medida combinada: Criar uma medida combinada como uma coluna para refletir várias condições (por exemplo, estado e tipo de nó)
Formatação condicional: Configurar regras de formatação condicional com base na nova medida combinada
Inserir legenda: Inserir o mesmo campo que uma legenda para melhorar a clareza e a filtragem

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