Contato
  Contato

Primeiros passos - Digital Twin Visual

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.
 
Navegação rápida:
Visão geral | Configuração de dados | Configuração básica | Recursos avançados | Solução de problemas
 

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

CampoTipoStatusDescriçãoExemplo
Conteúdo SVGMedida✅ NecessárioMarcação SVG contendo o diagrama de gêmeos digitais...
NodeIdCategoria✅ NecessárioIdentificador exclusivo para cada nóM1001, B1201, T1101
Dica de ferramenta de nóCategoria✨ Aprimorado"Key: Valor" formato de dica de ferramenta multilinhaStatus: Em execução\nTipo: Máquina\nEficiência: 92%
Cor da legenda (opcional)CategoriaNovo!Campo categórico para geração de legendas interativasExecução, manutenção, off-line
Valor do nóMedida🔄 AprimoradoMétricas de negócios para nós de filtragem cruzada85.4, 92.1, 79.8
EdgeIdCategoria❌ OpcionalIdentificador exclusivo para cada bordaE1001, E1002
SourceIdCategoria❌ OpcionalNó de origem para bordasM1001
TargetIdCategoria❌ OpcionalNó de destino para bordasM1002
Dica de ferramenta de borda (opcional)CategoriaNovo!Dica de ferramenta de vários campos com sistema de fallback inteligenteSuporte a vários campos
Valor da bordaMedida🔄 AprimoradoIntensidade de fluxo para filtragem cruzada + largura proporcional85.0, 150.5, 89.1

⚙️ Guia de configuração abrangente

Etapa 1: Prepare seu conteúdo SVG

  1. Criar medida SVG: Certifique-se de que seu SVG contenha uma marcação válida com id atributos
  2. IDs de correspondência: Os valores de NodeId devem corresponder ao elemento SVG id atributos exatamente
  3. Estrutura limpa: Use dimensionamento consistente e evite transformações complexas
  4. Cores neutras: Use cores SVG neutras; deixe que o visual controle a coloração
  5. 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: Faça o download do Visual e insira a licença

📽️ Neste vídeo, você aprenderá a fazer o download do visual do Digital Twin no AppSource e a ativar sua licença.

  1. Download Visual: Faça o download do visual do Digital Twin no MS AppSource
  2. Adicionar visual: Insira o visual do Digital Twin em seu relatório
  3. Inserir licença: Cole sua chave de licença no campo Licença seção sob Formatar seu visual

Etapa 3: Importar seus dados

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

  1. Preparar dados: Crie uma única tabela de dados combinando nós e bordas (veja acima)
  2. Importar dados: Importe o SVG (por exemplo, como .txt) e a tabela de dados (por exemplo, como csv.) para o campo do Power BI

Etapa 4: conectar dados ao visual

📽️ Neste vídeo, você conectará seus dados ao visual e habilitará a navegação e a interatividade com outros visuais.

  1. Aplicar dados básicos: Arraste os campos de conteúdo SVG, ID de nó e ID de borda no respectivo painel Visualizações
  2. Adicionar dados aprimorados: Adicione medidas aos campos de legenda e dica de ferramenta para enriquecer o visual
  3. Implemente a filtragem cruzada: Incluir medidas de NodeValue e EdgeValue para garantir que a filtragem funcione em todos os recursos visuais
  4. Navegação visual: Teste os recursos de navegação visual usando controles de zoom, mini-mapa ou mouse-over

Etapa 5: Personalize seus nós

📽️ Este vídeo aborda como aplicar a formatação condicional para destacar os insights do nó.

  1. Coloração simples de nós: Selecione a cor de sua preferência para cada nó na seção Nós seção sob Formatar seu visual
  2. Ou Aplicar formatação condicional: Configure regras individuais para colorir seus nós clicando no ícone de fórmula

Etapa 6: Personalize suas bordas

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

  1. (Des)selecionar Gradiente: Ativar/desativar o gradiente para colorir as bordas
  2. Personalizar o formato: Ajuste a opacidade, a largura da linha ou a ordem das camadas
  3. Coloração de bordas simples: Selecione a cor de sua preferência para cada borda na seção Bordas seção sob Formatar seu visual
  4. Ou Aplicar formatação condicional: Configure regras individuais para colorir suas bordas clicando no ícone de fórmula

Etapa 7: Criar dica de ferramenta avançada

📽️ Este vídeo explica como exibir contexto extra ao passar o mouse, com dicas de ferramentas simples ou avançadas.

  1. Aplicar dica de ferramenta básica: Arraste os campos para a seção Tooltip para aplicar uma dica de ferramenta básica
  2. Ou Criar dica de ferramenta avançada: Crie uma página de dica de ferramenta personalizada com gráficos, KPIs e muito mais
  3. Conecte-se 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 bordas.

  1. Criar página de detalhes: Crie uma página de relatório e projete visuais personalizados para obter insights detalhados
  2. Conecte-se ao Visual: Adicionar nodeID ou edgeID ao campo Drillthrough
  3. Teste de perfuração: Clique com o botão direito do mouse em um nó ou borda → Drillthrough para ver detalhes

Etapa 9: Aplicar formatação condicional avançada

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

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

🎯 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

  1. Instalação: Arraste qualquer campo categórico para "Cor da legenda (opcional)"
  2. Leitura de cores: A legenda lê automaticamente as cores reais dos nós renderizados
  3. Clique para filtrar: Clique nos itens da legenda para destacar os nós correspondentes
  4. Feedback visual: Categorias selecionadas destacadas, outras escurecidas
  5. Visual cruzado: Os cliques na legenda acionam a filtragem em outros recursos visuais
  6. 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

  1. Mapeamento de dados: Mapear a intensidade/rendimento do fluxo para o campo Edge Value
  2. Ativar recurso: Painel Formatar > Bordas > Geral > "Largura proporcional"
  3. Dimensionamento visual: A espessura da borda é dimensionada automaticamente de acordo com os valores dos dados
  4. Dimensionamento contextual: A normalização por nó mostra a importância relativa
  5. ID do gargalo: Identifique instantaneamente as conexões de alto fluxo
  6. 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

  1. Tabela ↔ Visual: Clique nas linhas da tabela para destacar nós/arestas
  2. Legenda ↔ Visual: Clique nos itens da legenda para destacar as categorias
  3. Visual ↔ Other Visuals: Clique em nós/arestas para filtrar gráficos/tabelas
  4. Seleção múltipla: Mantenha pressionada a tecla Ctrl e clique em vários elementos
  5. Limpar seleção: Clique no espaço vazio para redefinir todas as seleções
  6. 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:
  1. Ativar gradiente de borda: Transições de cores suaves entre os nós
  2. Largura proporcional: Escala de espessura baseada em fluxo
  3. Opacidade da borda: Controle de transparência (0-100%)
  4. Mostrar bordas em primeiro plano: Controle de camadas

Configuração de perfuração

  1. Crie páginas de navegação: Configurar páginas de detalhes dedicadas
  2. Adicionar campos de filtro: Incluir NodeId/EdgeId em filtros de drill-through
  3. Teste de navegação: Clique com o botão direito do mouse em nós/arestas para ver as opções de drill-through
  4. Menu de espaço vazio: Clique com o botão direito do mouse em áreas vazias para o menu padrão do Power BI
  5. 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!

© LeapLytics GmbH 2025 | Versão 1.0.0.5
Visual de gêmeos digitais para o Power BI