Ich habe mit dem rumgespieltKreissammelprobe. Ich habe jedoch große Probleme, das Ding von einem neuen Satz von JSON-Daten zu aktualisieren und anschließend zu aktualisieren.

Mein Code ist nur eine modifizierte Version des Circle Pack-Beispiels:

var diameter = 960,
    format = d3.format(",d");

var pack = d3.layout.pack()
    .size([diameter - 4, diameter - 4])
    .value(function(d) { return d.size; });

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .append("g")
    .attr("transform", "translate(2,2)");

var node;

d3.json("data1.json", function(error, root) {

    node = svg.datum(root).selectAll(".node")
      .data(pack.nodes);

    node.enter().append("g")
      .classed("node", true)
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.append("title")
      .text(function(d) { return d.name; });

    node.append("circle")
            .attr("r", 0)
        .on("click", refresh)
            .transition()
            .duration(2000)
        .attr("r", function(d) { return d.r; });

    node.append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.name });

    node.exit()
        .remove();
});

d3.select(self.frameElement).style("height", diameter + "px");

Das funktioniert wie erwartet. Ich möchte jedoch die Aktualisierungsfunktion ausführen, mit der das Diagramm aus neuen JSON-Daten aktualisiert und aktualisiert wird. Ich habe den folgenden Code ausprobiert, aber er fügt einfach ein neues Element hinzu, anstatt die alten zu ändern - und entfernt auch nicht die alten (node.exit.remove () wird anscheinend nie ausgeführt). Ich frage mich, ob es mit der Verwendung von "Datum" anstelle von "Daten" zu tun hat und ob diesbezüglich tatsächlich ein Daten-Join durchgeführt wird:

var refresh = function() {

    d3.json("data2.json", function(error, root2) {

        node = svg.datum(root2).selectAll(".node")
            .data(pack.nodes);

        node.append("title")
            .text(function(d) { return d.name; });

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

        node.append("text")
            .attr("dy", ".3em")
            .style("text-anchor", "middle")
            .text(function(d) { return d.name });
    });
}

Es fällt mir ziemlich schwer, herauszufinden, wie die Daten tatsächlich an das Paket gebunden sind und wie sie aktualisiert werden. Ich vermisse wahrscheinlich wieder etwas Einfaches, aber jede Hilfe wäre sehr dankbar, da es mir schwer gefallen ist, ein Beispiel zu finden, das dies illustriert. Ich mache später gerne eine für andere, wenn mir hier jemand helfen kann. :)

Die Daten, die ich verwende, lauten wie folgt:

{
    "name": "Names",
    "children": [
        { "name": "John", "size": 100 },
        { "name": "Peter", "size": 200 },
        { "name": "Arnold", "size": 300 },
        { "name": "Rasmus", "size": 400 }
    ]
}

und

{
    "name": "Names",
    "children": [
        { "name": "John", "size": 1000 },
        { "name": "Rasmus", "size": 200 },
        { "name": "Benjamin", "size": 300 },
        { "name": "James", "size": 400 }
    ]
}