Transição suave entre layouts de árvore, cluster, árvore radial e cluster radial
Para um projeto, preciso alterar interativamente o layout de dados hierárquicos de uma visualização - sem nenhuma alteração nos dados subjacentes. Os layouts capazes de alternar entre si devem ser árvore, cluster, árvore radial e cluster radial. E a transição deve ser preferencialmente uma animação.
Eu pensei que seria uma tarefa relativamente fácil comD3
. Comecei, mas me perdi em traduções e rotações, ligações de dados e similares, por isso estou pedindo ajuda. Além disso, provavelmente estou fazendo algo que não está no espírito do D3, o que é ruim, pois estou procurando uma solução limpa.
Eu montei umjsfidle, mas é apenas um ponto de partida, com botões de opção adicionados, conjunto de dados pequeno e conveniente e layout inicial do cluster - apenas para ajudar quem quiser dar uma olhada nisso. Desde já, obrigado!
ATUALIZAR:
Eu queria focar apenas nos links, então desabilitei temporariamente outros elementos. Com base no método @AmeliaBR, as seguintes animações são obtidas:
Aqui estájsfiddle atualizado.
ATUALIZAÇÃO 2:
Agora com círculos: (desculpe minha escolha de cores)
{doom-duba-doom}
Aqui estámais um jsfiddle atualizado.