Estoy tratando de envolver mi mente alrededor del diseño del paquete d3 (http://bl.ocks.org/4063530).

Tengo el diseño básico en funcionamiento pero me gustaría actualizarlo con nuevos datos. es decir, recopilar nuevos datos, vincularlos al layout.pack actual y actualizarlos según corresponda (actualizar / salir / ingresar).

Mis intentos están aquí (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; });

    };

Preguntás especificas...

¿Cómo puedo enlazar los datos? (ya que los datos no son una estructura compleja y no una matriz de datos)

¿Cómo se pueden agregar nuevos nodos / hojas al diseño? ¿Y los viejos removidos?

Los punteros a un ejemplo de trabajo serían muy apreciados.