Eu tenho um diagrama muito parecido comembalagem círculo

Em algum momento, um usuário deseja ver alguns dados diferentes. Obviamente, um diagrama diferente pode ser exibido imediatamente, mas a transição seria muito melhor do ponto de vista da percepção e da cognição. NOTA: A estrutura hierárquica permanece a mesma, não há nós novos ou excluídos, apenas valores subjacentes que determinam a alteração do tamanho do círculo.

Qual seria a boa maneira de implementar taltransição suave entre dois gráficos de pacote circular da mesma estrutura, mas com valores diferentes?

(É claro que, durante a transição, digamos que dura 10 segundos, não há necessidade de manter a relação entre os círculos, como no gráfico original, os círculos podem se cruzar e passar um sobre o outro)

Eu sei que existe uma solução semelhante paramapas de árvores. No entanto, ele não pode ser aplicado na embalagem do círculo. Os mapas de árvore têm até uma função especial sticky () que ajuda nesses casos.

EDIT: Estou anexando nova versão dojsfiddle.

Algumas funcionalidades começaram a funcionar agora. Transições conduzidas com dados aleatórios são bonitas.

Eu tenho duas preocupações neste momento:

Não sei como atualizar dicas de ferramentas. Isso é importante, o usuário deve conseguir identificar pontos de dados por meio de dicas de ferramentas. Por outro lado, o bom é que eles não precisam ser interpolados durante a transição, mudanças bruscas são suficientes, mas não sei como fazê-lo.Eu realmente não entendo o código. A codificação era principalmente processo de tentativa / erro. Eu apreciaria se alguém verificar se o código é bom, ou talvez não seja bom, ou pode ser diferente.

EDIT 2: Resolvi os problemas e anexei o jsfiddle na resposta se alguém precisar do código. Todos ainda podem comentar sobre a solução.

Parte mais crítica do código, ao que parece, é:

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

Agradecemos antecipadamente por qualquer ajuda ou dica.