Для проекта мне нужно интерактивно изменять иерархическую структуру данных визуализации - без какого-либо изменения базовых данных. Макеты, способные переключаться между собой, должны быть деревом, кластером, радиальным деревом и радиальным кластером. И переход должен быть предпочтительно анимацией.
Я думал, что это будет относительно простой задачей с D3
. Я начал, но я потерялся в переводах и поворотах, привязках данных и т.д., Поэтому я прошу вас о помощи. Кроме того, возможно, я делаю что-то не в духе D3, что плохо, так как я ищу чистое решение.
Я собрал jsfidle, но это всего лишь отправная точка с добавленными переключателями, удобным небольшим набором данных и начальным расположением кластера - чтобы помочь кому-либо который хочет взглянуть на это. Спасибо заранее!
UPDATE:
Я хотел сосредоточиться только на ссылках, поэтому я временно отключил другие элементы. Основываясь на методе @AmeliaBR, получаются следующие анимации:
Вот обновленный jsfiddle.
ОБНОВЛЕНИЕ 2:
Теперь с кругами: (извините, мой выбор цветов)
{дум-Дуба-дум}