Ich habe ein Diagramm sehr ähnlichKreispackung

Irgendwann möchte ein Benutzer einige andere Daten sehen. Natürlich kann ein anderes Diagramm sofort angezeigt werden, aber der Übergang wäre aus Sicht der Wahrnehmung und der Wahrnehmung viel besser. HINWEIS: Die hierarchische Struktur bleibt unverändert. Es gibt keine neuen oder gelöschten Knoten, sondern nur zugrunde liegende Werte, die die Änderung der Kreisgröße bestimmen.

Was wäre der gute Weg, um solche zu implementierenfließender Übergang zwischen zwei Kreisgrafiken von gleicher Struktur aber unterschiedlichen Werten?

(Während des Übergangs, der beispielsweise 10 Sekunden dauert, besteht natürlich keine Notwendigkeit, die Beziehung zwischen Kreisen wie im Originaldiagramm beizubehalten. Kreise können sich kreuzen und übereinander liegen.)

Ich weiß, dass es eine ähnliche Lösung für gibtBaumkarten. Es kann jedoch überhaupt nicht auf Kreispackungen angewendet werden. Treemaps haben sogar eine spezielle Funktion sticky (), die in solchen Fällen hilft.

EDIT: Ich hänge eine neue Version von anjsfiddle.

Einige Funktionen funktionieren jetzt. Übergänge mit zufälligen Daten sind wunderschön.

Ich habe im Moment zwei Bedenken:

Ich weiß nicht, wie ich Tooltips aktualisieren soll. Dies ist wichtig, der Benutzer sollte in der Lage sein, Datenpunkte über QuickInfos zu identifizieren. Andererseits ist es gut, dass sie während des Übergangs nicht interpoliert werden müssen, ein plötzlicher Wechsel ist ausreichend, aber ich weiß nicht, wie man das macht.Ich verstehe den Code wirklich nicht. Die Codierung erfolgte größtenteils durch Versuch / Irrtum. Ich würde mich freuen, wenn jemand überprüft, ob der Code gut oder nicht gut ist oder anders sein könnte.

EDIT 2: Ich habe Probleme gelöst und jsfiddle in der Antwort angehängt, wenn jemand den Code benötigt. Jeder ist immer noch willkommen, sich zur Lösung zu äußern.

Der kritischste Teil des Codes scheint zu sein:

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

Vielen Dank im Voraus für jede Hilfe oder Hinweise.