Próbuję zawinąć mój umysł wokół układu pakietu d3 (http://bl.ocks.org/4063530).

Mam podstawowy układ, ale chciałbym zaktualizować go o nowe dane. tj. zbierać nowe dane, wiązać je z bieżącym układem.pack i odpowiednio aktualizować (update / exit / enter).

Moje próby są tutaj (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; });

    };

Szczegółowe pytania ...

Jak powiązać dane? (ponieważ dane nie są skomplikowaną strukturą, a nie tablicą danych)

W jaki sposób można dodawać nowe węzły / liście do układu? A stare usunięto?

Wskaźniki do przykładu roboczego byłyby bardzo mile widziane.