Eu estou tentando envolver minha mente em torno do layout do pacote do d3 (http://bl.ocks.org/4063530).

Eu tenho o layout básico funcionando, mas gostaria de atualizá-lo com novos dados. por exemplo, colete novos dados, vincule-os ao layout atual.pack e atualize adequadamente (update / exit / enter).

Minhas tentativas estão aqui (http://jsfiddle.net/emepyc/n4xk8/14/):

var bPack = function(vis) {
    var pack = d3.layout.pack()
    .size([400,400])
    .value(function(d) {return d.time});

    var node = vis.data([data])
    .selectAll("g.node")
    .data(pack.nodes)
    .enter()
    .append("g")
    .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

node.append("circle")
    .attr("r", function(d) { return d.r });

    node.filter(function(d) { return !d.children; }).append("text")
    .attr("text-anchor", "middle")
    .attr("dy", ".3em")
    .text(function(d) { return d.analysis_id });

    bPack.update = function(new_data) {
        console.log("UPDATE");

        node
        .data([new_data])
        .selectAll("g.node")
        .data(pack.nodes);

        node
        .transition()
        .duration(1000)
        .attr("class", function(d) { return d.children ? "node" : "leaf node" })
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")" });

        node.selectAll("circle")
        .data(new_data)
        .transition()
    .duration(1000)
    .attr("r", function(d) { return d.r; });

    };

Perguntas específicas ...

Como vinculo os dados? (desde que os dados não são estrutura complexa e não uma matriz de dados)

Como novos nós / folhas podem ser adicionados ao layout? E os antigos foram removidos?

Ponteiros para um exemplo de trabalho seriam muito apreciados.