Primeiros passos - Visual do gêmeo digital

Seja bem-vindo! Este guia abrangente o ajudará a começar a usar rapidamente o visual Digital Twin para Power BI, com navegação avançada, legenda interativa, largura de borda proporcional, dicas de ferramentas aprimoradas, filtragem cruzada e recursos de detalhamento.

Visão geral abrangente dos recursos

Navegação aprimorada 🔍 ✨

Zoom e panorâmica fluidos com animações suaves
Controles profissionais de navegação na tela
Minimapa em tempo real com indicador de viewport
Feedback inteligente do cursor (agarrar/agarrar)
Precisão semelhante à do CAD para diagramas grandes

Sistema de legenda interativa 🎨 ✨

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

📊 Largura proporcional da borda ✨

A espessura da borda varia de acordo com a intensidade do fluxo
Algoritmo de normalização por nó
Identificação instantânea de gargalos
Ativar/desativar por meio do painel de formato
Visualização de fluxo contextual

Dicas de ferramentas aprimoradas ✨

Dicas flexíveis do nó "Key: Dicas de ferramentas do nó "Valor" flexíveis
Sistema de fallback de dica de ferramenta de borda inteligente
Suporte a 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
Destaque individual de nó/borda
Filtragem de categoria baseada em legenda
Suporte à seleção múltipla
Modelo de dados aprimorado com medidas

Integração com o Power BI

Menus de contexto compatíveis com o AppSource
Recursos avançados de pesquisa
Controles organizados do painel de formato
Controles de borda aprimorados com subgrupos
Gerenciamento de seleção profissional

Configuração e requisitos de dados aprimorados

⚠️ Importante: Todos os dados devem estar em uma única tabela usando uma estrutura UNION com o tratamento adequado de NULL para otimizar o desempenho.

Estrutura aprimorada do modelo de dados

- Estrutura de dados aprimorada com todos os novos recursos

SELECIONAR 

    NodeId, 

    'Status: Running\nType: Machine\nTemperature: 85°C\nEfficiency: 92%' as NodeTooltip,

    'Running' as LegendColor, - Para legenda interativa ✨

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

    Eficiência como NodeValue, - Para filtragem cruzada

    NULL como EdgeValue

FROM NodesTable

UNION ALL

SELECIONAR 

    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 como EdgeValue - Filtragem cruzada + largura proporcional ✨

FROM EdgesTable

Referência de funções de dados aprimoradas

Campo	Tipo	Status	Descrição	Exemplo
Conteúdo SVG	Medida	✅ Necessário	Marcação SVG contendo o diagrama de gêmeos digitais	...
NodeId	Categoria	✅ Necessário	Identificador exclusivo para cada nó	M1001, B1201, T1101
Dica de ferramenta de nó	Categoria	✨ Aprimorado	"Key: Valor" formato de dica de ferramenta multilinha	Status: Em execução\nTipo: Máquina\nEficiência: 92%
Cor da legenda (opcional)	Categoria	Novo!	Campo categórico para geração de legendas interativas	Execução, manutenção, off-line
Valor do nó	Medida	🔄 Aprimorado	Métricas de negócios para nós de filtragem cruzada	85.4, 92.1, 79.8
EdgeId	Categoria	❌ Opcional	Identificador exclusivo para cada borda	E1001, E1002
SourceId	Categoria	❌ Opcional	Nó de origem para bordas	M1001
TargetId	Categoria	❌ Opcional	Nó de destino para bordas	M1002
Dica de ferramenta de borda (opcional)	Categoria	Novo!	Dica de ferramenta de vários campos com sistema de fallback inteligente	Suporte a vários campos
Valor da borda	Medida	🔄 Aprimorado	Intensidade de fluxo para filtragem cruzada + largura proporcional	85.0, 150.5, 89.1

⚙️ Guia de configuração abrangente

Etapa 1: Prepare seu conteúdo SVG

Criar medida SVG: Certifique-se de que seu SVG contenha uma marcação válida com id atributos
IDs de correspondência: Os valores de NodeId devem corresponder ao elemento SVG id atributos exatamente
Estrutura limpa: Use dimensionamento consistente e evite transformações complexas
Cores neutras: Use cores SVG neutras; deixe que o visual controle a coloração
Design preparado para bordas: Projete caminhos de borda para que funcionem 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’/>

"

Etapa 2: Configurar o Basic Visual

Adicionar visual: Insira o visual do Digital Twin em seu relatório
Mapear conteúdo SVG: Arraste sua medida SVG para o campo "SVG Content" (Conteúdo SVG)
Mapa NodeId: Arraste seu identificador de nó até o campo "NodeId"
Teste a funcionalidade básica: Verificar se os nós são clicáveis e se o foco funciona

Etapa 3: Habilitar recursos aprimorados ✨

Configuração de legenda interativa

Adicionar campo de legenda: Arraste o campo categórico para "Cor da legenda (opcional)"
Geração automática: A legenda lê automaticamente as cores reais dos nós
Interação de teste: Clique nos itens da legenda para destacar os nós
Verificar a tela: A contagem de nós de verificação aparece para cada categoria

Configuração aprimorada de dicas de ferramentas

Dicas de ferramentas de nós: Use o formato "Key: Value\nKey2: Value2" no campo Dica de ferramenta do nó
Dicas de ferramentas de borda: Arraste vários campos para "Dica de ferramenta de borda (opcional)"
Conteúdo do teste: Passe o mouse sobre nós/arestas para verificar as dicas de ferramentas avançadas
Verificar rótulos: Garantir que os nomes dos campos apareçam como rótulos de dicas de ferramentas

Configuração da largura da borda proporcional

Adicionar dados de fluxo: Mapear valores de taxa de transferência/intensidade para o campo Edge Value
Adicionar campos de borda: Incluir EdgeId, SourceId, TargetId para visualização
Ativar recurso: Painel Formatar > Bordas > Geral > Alternar "Largura proporcional"
Escala de teste: Verificar as escalas de espessura da borda com os valores dos dados

Configuração avançada de navegação

Ativar controles: Painel de formatação > Navegação > Ativar controles de zoom
Ativar minimapa: Alternar o minimapa para navegação em diagramas grandes
Teste de navegação: Zoom com a roda do mouse, panorâmica com clique e arrasto
Verificar feedback: Verificar as alterações do cursor durante as operações de panorâmica

Configuração avançada de filtragem cruzada

Adicionar campos de medida: Incluir medidas de NodeValue e EdgeValue
Criar tabelas: Adicionar visualizações de tabela com os mesmos dados para filtragem
Filtragem da tabela de teste: Clique nas linhas da tabela para destacar os elementos
Filtragem de legenda de teste: Clique em itens de legenda para filtragem de categoria
Teste a filtragem visual: Clique em nós/arestas para filtrar outros recursos visuais

Configuração concluída: Agora você deve ter um gêmeo digital totalmente interativo com navegação avançada, legenda interativa, largura de borda proporcional, dicas de ferramentas aprimoradas e recursos abrangentes de filtragem cruzada.

🎯 Guia de uso de recursos avançados

Navegação e zoom aprimorados 🔍 ✨

Interações entre mouse e toque

Roda do mouse: Role para aumentar ou diminuir o zoom com animações suaves
Clique e arraste: Deslocamento panorâmico com feedback visual do cursor (agarrar/desviar)
Controles de navegação: Use os botões +, - e home na tela
Redefinir visualização: Clique no botão home para retornar suavemente à visualização original
Navegação pelo minimapa: Clique no minimapa para pular para áreas diferentes
Rastreamento da janela de visualização: Assista ao retângulo da janela de visualização em tempo real no minimapa

Sistema de legenda interativa 🎨 ✨

Configuração e uso 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 renderizados
Clique para filtrar: Clique nos itens da legenda para destacar os nós correspondentes
Feedback visual: Categorias selecionadas destacadas, outras escurecidas
Visual cruzado: Os cliques na legenda acionam a filtragem em outros recursos visuais
Redefinir: Clique novamente no mesmo item da legenda para limpar o destaque

Dica profissional: Perfeito para monitoramento de status, filtragem de categorias e compreensão do que as cores dos nós representam em um relance.

📊 Largura proporcional da borda ✨

Visualização baseada em fluxo

Mapeamento de dados: Mapear a intensidade/rendimento do fluxo para o campo Edge Value
Ativar recurso: Painel Formatar > Bordas > Geral > "Largura proporcional"
Dimensionamento visual: A espessura da borda é dimensionada automaticamente de acordo com os valores dos dados
Dimensionamento contextual: A normalização por nó mostra a importância relativa
ID do gargalo: Identifique instantaneamente as conexões de alto fluxo
Alcance visual: Espessura mínima de 1px a máxima de 8px

Valor comercial: Use-o em painéis operacionais para identificar imediatamente gargalos e conexões de alto rendimento em seu gêmeo digital.

Sistema de dicas de ferramentas aprimorado

Configuração flexível de dicas de ferramentas

Dicas de ferramentas de nós: Use o formato "Key: Value\nKey2: Value2" no campo Dica de ferramenta do nó
Suporte a várias linhas: Use \n para quebras de linha no conteúdo da dica de ferramenta
Dicas de ferramentas de borda: Arraste vários campos para "Dica de ferramenta de borda (opcional)"
Fallback inteligente: Informações básicas automáticas quando não há campos personalizados especificados
Etiquetas de campo: Os nomes dos campos se tornam automaticamente rótulos de dicas de ferramentas
Conteúdo rico: Suporte ao contexto operacional e às métricas de negócios

Filtragem cruzada avançada

Sistema de filtragem de três vias

Tabela ↔ Visual: Clique nas linhas da tabela para destacar nós/arestas
Legenda ↔ Visual: Clique nos itens da legenda para destacar as categorias
Visual ↔ Other Visuals: Clique em nós/arestas para filtrar gráficos/tabelas
Seleção múltipla: Mantenha pressionada a tecla Ctrl e clique em vários elementos
Limpar seleção: Clique no espaço vazio para redefinir todas as seleções
Feedback visual: Elementos destacados com opacidade total, outros com opacidade reduzida

Controles avançados de borda

Painel de formato organizado

📁 Seção de bordas:

Cores das bordas (subgrupo): Cores de borda individuais e controles de gradiente
⚙️ Geral (subgrupo): Opacidade, ordem de renderização e largura proporcional

Controles disponíveis:

Ativar gradiente de borda: Transições de cores suaves entre os nós
Largura proporcional: Escala de espessura baseada em fluxo
Opacidade da borda: Controle de transparência (0-100%)
Mostrar bordas em primeiro plano: Controle de camadas

Configuração de perfuração

Crie páginas de navegação: Configurar páginas de detalhes dedicadas
Adicionar campos de filtro: Incluir NodeId/EdgeId em filtros de drill-through
Teste de navegação: Clique com o botão direito do mouse em nós/arestas para ver as opções de drill-through
Menu de espaço vazio: Clique com o botão direito do mouse em áreas vazias para o menu padrão do Power BI
Verificar o contexto: Garantir que o contexto filtrado seja passado corretamente

Guia completo de solução de problemas

Problemas de navegação aprimorados ✨

Verifique o painel Formato > Configurações de navegação para controles de zoom e visibilidade do minimapa
Verifique se há espaço visual suficiente para os controles de navegação e o minimapa
Testar o feedback do cursor durante as operações de panorâmica (deve mostrar agarrar/agarrar)
Garantir que o retângulo de visualização do minimapa seja atualizado corretamente durante o zoom/pan
Teste em diferentes tamanhos de tela para verificar o comportamento responsivo

Problemas interativos de legenda ❌ Problemas interativos de legenda ✨

Verifique se o campo categórico foi arrastado para "Cor da legenda (opcional)"
Verifique se os nós têm cores reais (não são todos cinza padrão)
Garantir que os dados categóricos contenham valores significativos e limpos
Testar a funcionalidade de clique na legenda para o comportamento de destaque
Verifique se o posicionamento da legenda não obstrui o conteúdo visual principal

Problemas de largura de borda proporcional

Ative a opção "Proportional Width" (Largura proporcional) no painel Format (Formato) > Edges (Bordas) > General (Geral)
Certifique-se de que o campo Edge Value contenha dados de fluxo numéricos
Verifique se EdgeId, SourceId e TargetId estão mapeados corretamente
Verificar se os dados de borda têm uma variação significativa nos valores
Teste se a escala de espessura é visualmente apropriada

Problemas de dica de ferramenta aprimorados ✨

Use o formato "Key: Value\nKey2: Value2" para o campo Node Tooltip
Para a dica de ferramenta de borda, arraste os campos para a seção "Edge Tooltip (optional)" (dica de ferramenta de borda (opcional))
Teste o fallback inteligente quando nenhum campo de dica de ferramenta de borda for especificado
Verificar se os nomes dos campos aparecem como rótulos na exibição da dica de ferramenta
Garantir que o conteúdo de várias linhas seja exibido com as devidas quebras de linha

A filtragem cruzada não está funcionando

Adicionar campos de medida Node Value e/ou Edge Value
Garantir que os valores de medida sejam preenchidos (não NULL/vazios)
Teste em ambas as direções: tabela → visual e visual → tabela
Teste a filtragem baseada em legenda de forma independente
Verificar se a seleção aciona os destaques (alterações de opacidade)
Teste com seleção única simples primeiro

O visual não está sendo exibido

Verifique se a medida de conteúdo SVG retorna uma marcação SVG válida
Verificar se o campo NodeId está mapeado e contém dados
Garantir que os IDs de elementos SVG correspondam exatamente aos valores de NodeId
Validar a sintaxe do SVG usando um validador de SVG on-line

Nós não interativos

Confirmar se 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
Teste os efeitos de foco para confirmar a detecção de elementos

Bordas não aparecendo

Mapear as funções de dados EdgeId, SourceId e TargetId
Garantir que os valores SourceId/TargetId correspondam aos valores NodeId existentes
Verifique a configuração de opacidade da borda (pode estar muito baixa)
Verificar a ordem de renderização da borda (primeiro plano versus plano de fundo)
Teste primeiro com cores de borda de alto contraste

Práticas recomendadas avançadas

Modelagem de dados aprimorada ✨

Escolha campos categóricos significativos para a legenda interativa
Estruture as dicas de ferramentas usando o formato "Key: Valor".
Usar métricas de fluxo para largura proporcional da borda
Garantir o tratamento adequado de NULL na estrutura UNION
Teste com volumes de dados realistas

Desempenho e navegação ✨

Aproveite o minimapa para navegar em diagramas grandes
Otimizar a complexidade do SVG para um zoom/pan suave
Teste a largura proporcional com dados de fluxo realistas
Monitore o uso da memória com recursos aprimorados
Use os campos de medida estrategicamente para filtragem cruzada

Experiência do usuário ✨

Use cliques na legenda para filtragem baseada em categoria
Combinar a filtragem de tabelas com a filtragem de legendas
Crie um conteúdo de dica de ferramenta significativo
Padronize os níveis de zoom e os padrões de navegação
Teste todos os fluxos de trabalho de interação de ponta a ponta

Integração avançada ✨

Use a largura proporcional para monitoramento operacional
Combine a filtragem de legendas com a análise de séries temporais
Conecte os dados de fluxo com a análise preditiva
Criar painéis multimodais abrangentes
Integrar com visuais geográficos usando filtragem compartilhada

Pronto para começar? Esse visual abrangente transforma diagramas estáticos em painéis gêmeos digitais interativos com navegação profissional, visualização de fluxo inteligente, filtragem baseada em categorias e informações contextuais avançadas!