Reagir Árvore Gráfico

Nidhin Kumar em Level Up Your Code Seguir 13 de jul · 3 min ler

visão global

React Tree graph é um componente que renderiza dados como uma árvore usando SVG

Objetivos

  • Instalando o componente Gráfico de Árvore de Reação
  • Customizando o Gráfico de Árvores
  • Eventos de clique do gráfico de árvore
  • Adereços do Caminho Personalizado
  • Animação vista de árvore

Criação de Projetos

Vamos começar criando um aplicativo React usando o comando abaixo

 criar-reagir-aplicativo vista de árvore 
vista de árvore de cd
npm start

Se você gostaria de usar o TypeScript para o seu aplicativo React, use o comando abaixo

 criar-reagir-app tree-view --typescript 
vista de árvore de cd
npm start

1. Instalando o Componente React Tree Graph

Agora vamos instalar o componente react-tree-graph usando o comando abaixo

 npm instalar react-tree-graph --save 

Se você estiver usando o TypeScript, precisará adicionar os tipos para o componente. infelizmente, o react-tree-graph não tem os tipos para instalar, então precisamos declarar um módulo como abaixo

Crie uma nova pasta chamada types em src->types e crie um novo arquivo chamado AllTypes.d.ts e adicione o código abaixo.

 declarar módulo 'react-tree-graph'; 

clique em Salvar e vá para tsconfig.json e adicione o código abaixo nas opções do compilador

 "typeRoots": ["./src/types"] 

Ainda confuso onde adicionar dê uma olhada

 { 
"compiladorOptions": {
.......
"typeRoots": ["./src/types"]
}
....
}

Agora vamos adicionar os códigos no App.tsx . Primeiro, substitua os códigos padrão disponíveis no App.tsx pelo código abaixo

clique em Salvar e execute o projeto usando o comando npm start e sua saída será como abaixo

2. Personalizando o Gráfico de Árvores

Agora vamos personalizar o gráfico de árvores adicionando mais dados e cores personalizadas para os caminhos

Crie um arquivo chamado data.ts e adicione o código abaixo

Em App.tsx substitua os códigos antigos pelo novo, como abaixo

Substitua App.css / crie novos estilos e adicione o código abaixo

Agora execute o projeto que sua saída será como abaixo

Agora vamos personalizar o gráfico em árvore mostrando o texto abaixo para o nó pai Color e aumentar o tamanho do ícone usando nodeRadius

Em data.ts adicionar textProps: {x: -25, y: 25} para todos os nós e filhos e no App.tsx adicionar os adereços para o componente Árvore como abaixo

Agora execute o projeto e você poderá ver a saída como abaixo

3. Eventos de clique do gráfico de árvore

Se quisermos fazer alguma operação enquanto gProps em um filho na árvore, podemos fazê-lo usando o gProps handleClick como abaixo

E sua saída é como

4. adereços caminho personalizado

Se você gostaria de ter estilos personalizados para seus caminhos, você pode fazê-lo usando o caminho props, definindo o nome da classe e passando o valor e em CSS, defina o nome da classe como abaixo.

E em data.ts add, uma nova propriedade chamada pathProps e define um className em pathprops como abaixo

 pathProps: {className: 'red'} 

clique em Salvar e execute o projeto. Sua saída será como

Gráfico da árvore 5.Animated

Se você quiser que seu gráfico de árvore com animação simplesmente adicione animated no componente <Árvore />.

clique em Salvar e execute o projeto, você verá a animação como abaixo

Parabéns, você criou o gráfico de árvore para reagir com estilos e animações personalizados. Explore mais com o plugin. Codificação feliz 🙂

Link de Referência

Reagir-árvore-gráfico

Gera um gráfico em árvore dos dados

www.npmjs.com