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.