Mam diagram bardzo podobny dopakowanie w kółko

W pewnym momencie użytkownik chce zobaczyć różne dane. Oczywiście inny schemat może zostać wyświetlony natychmiast, ale przejście byłoby znacznie lepsze z punktu widzenia percepcji i poznania. UWAGA: Struktura hierarchiczna pozostaje taka sama, nie ma nowych ani usuniętych węzłów, tylko podstawowe wartości określające zmianę rozmiaru okręgu.

Jaki byłby dobry sposób wdrożeniapłynne przejście między dwoma wykresami paczki okręgu o tej samej strukturze, ale różnych wartościach?

(Oczywiście, podczas przejścia, powiedzmy, że trwa 10 sekund, nie ma potrzeby utrzymywania relacji między okręgami jak na oryginalnym wykresie, koła mogą się przecinać i przechodzić jeden nad drugim)

Wiem, że istnieje podobne rozwiązanietreemaps. Nie można jednak w ogóle zastosować go do pakowania w kółko. Treemaps mają nawet specjalną funkcję lepką (), która pomaga w takich przypadkach.

EDYCJA: Dołączam nową wersjęjsfiddle.

Niektóre funkcje zaczęły działać. Przejścia napędzane losowymi danymi są piękne.

W tej chwili mam dwie obawy:

Nie wiem, jak zaktualizować podpowiedzi. Jest to ważne, użytkownik powinien być w stanie zidentyfikować punkty danych za pomocą podpowiedzi. Z drugiej strony, dobrą rzeczą jest to, że nie muszą być interpolowane podczas przejścia, nagła zmiana jest wystarczająca, ale nie wiem, jak to zrobić.Naprawdę nie rozumiem kodu. Kodowanie było głównie procesem próbnym / błędu. Byłbym wdzięczny, gdyby ktoś sprawdził, czy kod jest dobry, a może nie, albo może być inny.

EDYCJA 2: Rozwiązałem problemy i załączyłem jsfiddle w odpowiedzi, jeśli ktoś potrzebuje kodu. Wszyscy nadal mogą komentować rozwiązanie.

Wydaje się, że najbardziej krytyczna część kodu:

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;
};

Z góry dziękuję za pomoc lub podpowiedź.