У меня есть диаграмма, очень похожая накруг упаковки

В какой-то момент пользователь хочет увидеть некоторые другие данные. Очевидно, что сразу можно отобразить другую диаграмму, но переход будет намного лучше с точки зрения восприятия и познания. ПРИМЕЧАНИЕ. Иерархическая структура остается прежней, новых или удаленных узлов нет, только базовые значения, определяющие изменение размера круга.

Каков был бы хороший способ реализовать такиеплавный переход между двумя графами пакетов той же структуры, но разных ценностей?

(Конечно, во время перехода, который, скажем, длится 10 секунд, нет необходимости сохранять связь между кругами, как в исходном графике, круги могут пересекаться и проходить один над другим)

Я знаю, что есть подобное решение дляДревовидные карты, Однако, это не может быть применено к упаковке круга вообще. В древовидных картах даже есть специальная функция sticky (), которая помогает в таких случаях.

РЕДАКТИРОВАТЬ: я прилагаю новую версиюjsfiddle.

Некоторые функции теперь начали работать. Переходы, управляемые случайными данными, прекрасны.

У меня есть две проблемы в данный момент:

Я не знаю, как обновить всплывающие подсказки. Это важно, пользователь должен иметь возможность идентифицировать точки данных с помощью всплывающих подсказок. С другой стороны, хорошо то, что их не нужно интерполировать во время перехода, достаточно резких изменений, но я не знаю, как это сделать.Я действительно не понимаю код. Кодирование было в основном методом проб / ошибок. Буду признателен, если кто-нибудь подтвердит, что код хороший, а может, и плохой, или он может быть другим.

РЕДАКТИРОВАТЬ 2: Я решил проблемы, и приложил jsfiddle в ответ, если кому-то нужен код. Все еще могут прокомментировать решение.

Кажется, что наиболее важной частью кода является:

function updateVis() {
    // change pack value
    if (updateMethod == 0)
        pack.value(function(d) { return d.size; });
    if (updateMethod == 1)
        pack.value(function(d) { return 100; });
    if (updateMethod == 2)
        pack.value(function(d) { return 1 + Math.floor(Math.random()*101); });

    var data1 = pack.nodes(data);

//    titles = ?????

    circles.transition()
        .duration(2000)
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
        .attr("r", function(d) { return d.r; });
    return;
};

Заранее спасибо за любую помощь или подсказку.