Ich versuche, mich um das Pack-Layout von d3 zu kümmern (http://bl.ocks.org/4063530).

Ich habe das Grundlayout, möchte es aber mit neuen Daten aktualisieren. d.h. neue Daten sammeln, an das aktuelle layout.pack binden und entsprechend aktualisieren (update / exit / enter).

Meine Versuche sind hier (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; });

    };

Spezifische Fragen...

Wie binde ich die Daten? (da die Daten keine komplexe Struktur und kein Array von Daten sind)

Wie können neue Knoten / Blätter zum Layout hinzugefügt werden? Und alte entfernt?

Hinweise auf ein funktionierendes Beispiel wären sehr dankbar.