Tengo un diagrama muy similar acírculo de embalaje

En algún momento, un usuario quiere ver algunos datos diferentes. Obviamente, se puede mostrar un diagrama diferente de inmediato, pero la transición sería mucho mejor desde el punto de vista de la percepción y la cognición. NOTA: La estructura jerárquica sigue siendo la misma, no hay nodos nuevos o eliminados, solo valores subyacentes que determinan el cambio de tamaño del círculo.

¿Cuál sería la buena manera de implementar talestransición suave entre dos gráficos de paquete de círculo ¿De la misma estructura pero diferentes valores?

(Por supuesto, durante la transición, es decir, dura 10 segundos, no es necesario mantener la relación entre los círculos como en el gráfico original, los círculos pueden cruzarse y pasar uno sobre otro)

Sé que hay una solución similar paramapas de ruta. Sin embargo, no se puede aplicar en el embalaje del círculo en absoluto. Treemaps incluso tienen una función especial sticky () que ayuda en estos casos.

EDITAR: estoy adjuntando nueva versión dejsfiddle.

Algunas funcionalidades ahora empezaron a funcionar. Las transiciones conducidas con datos aleatorios son hermosas.

Tengo dos preocupaciones en este momento:

No sé cómo actualizar información sobre herramientas. Esto es importante, el usuario debe poder identificar puntos de datos a través de información sobre herramientas. Por otro lado, lo bueno es que no necesitan ser interpolados durante la transición, un cambio abrupto es suficiente, pero no sé cómo hacerlo.Realmente no entiendo el código. La codificación fue principalmente un proceso de prueba / error. Apreciaría si alguien verifica que el código es bueno, o tal vez no es bueno, o podría ser diferente.

EDIT 2: resolví problemas y adjunté jsfiddle en la respuesta si alguien necesita el código. Todos son bienvenidos a comentar sobre la solución.

La parte más crítica del código, parece ser:

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

Gracias de antemano por cualquier ayuda o sugerencia.