Aktualisieren eines Layout.Pack in d3.js

Question

Ich versuche, mich um d3 Pack Layout (http://bl.ocks.org/4063530).

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

sind Meine Versuche, 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?

Zeiger zu einem Arbeitsbeispiel würden sehr geschätzt werden.

Answer 1

Arbeitsbeispiel ist here.

Grundsätzlich gibt es einen Code für die Erstladung, bei dem alle Kreise, QuickInfos usw. an den ursprünglichen Stellen erstellt und positioniert werden. Ebenso wird das Layout (Pack) erstellt.

Dann werden bei jedem Tastendruck neue Daten in das Paket geladen und das Paket wird neu berechnet.Der entscheidende Code ist hier:

Hier können Sie binden (Last) jetzt Daten in Pack Layout: (in meinem Beispiel seiner Zufallsdaten, natürlich werden Sie Ihre Daten aus json oder Code oder ähnlichem haben):

pack.value(function(d) { return 1 + 
      Math.floor(Math.random()*501); }); 

Hier wird das neue Layout berechnet:

pack.nodes(data); 

Danach werden Elemente auf neue Positionen übergegangen ist, und dessen Attribute geändert werden, wie Sie bestimmen.

Ich möchte nur betonen, dass ich nicht enter/update/exit Muster oder Transformationen (die Sie in anderen Lösungen sehen können) verwenden, da ich glaube, dass dies unnötige Komplexität für solche Beispiele einführt.

Hier sind einige Bilder mit Übergang in Aktion:

Start:

Transition:

Ende:

Answer 2

Relevant, wenn Sie nicht bereits überprüft:
http://bl.ocks.org/3808218 - Allgemeines Update-Muster, ich
http://bl.ocks.org/3808221 - Allgemeines Update-Muster, II
http://bl.ocks.org/3808234 - Allgemeines Update-Muster, III

Dieses Beispiel Geige hat keine Übergänge, aber hier ist mindestens ein Ansatz für die Aktualisierung der Daten.

http://jsfiddle.net/jmKH6/

// VISUALIZATION 
var svg = d3.select("#kk") 
    .append("svg") 
    .attr("width", 500) 
    .attr("height", 600) 
    .attr("class", "pack"); 

var g = svg.append("g") 
    .attr("transform", "translate(2,2)"); 

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

function update(data) { 

    var nodeStringLenth = d3.selectAll("g.node").toString().length; 
    if (nodeStringLenth > 0) { 
     d3.selectAll("g.node") 
      .remove(); 
    } 

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

     node.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 }); 

     node 
      .exit() 
      .remove(); 
} 


var myData = [data1, data2, data3]; 
update(data1); 
setInterval(function() { 
    update(myData[Math.floor(Math.random() * myData.length)]); // http://stackoverflow.com/questions/4550505/getting-random-value-from-an-array?lq=1 
}, 1500); 

Answer 3

hatte ich das gleiche Problem vor kurzem, und kam in den General-Update-Muster und Lektionen. Diese dienten nicht meinem Zweck. Ich hatte ein paar hundert DOM-Elemente in einem Diagramm (ForceLayout), und ich erhielt REST-Daten mit Eigenschaften für jeden einzelnen Knoten zurück. Die Aktualisierung durch erneute Datenbindung führte zur Rekonstruktion des gesamten Graphen, wie Sie als Antwort auf den Vorschlag von mg1075 gesagt haben. Es dauert einige Minuten, bis das DOM in meinem Fall aktualisiert wurde.

Ich habe schließlich eindeutige IDs zu Elementen zugeordnet, die später aktualisiert werden müssen, und ich habe sie mit JQuery ausgewählt. Mein gesamtes Graph-Setup verwendet D3, aber meine Updates nicht. Das fühlt sich schlecht an, aber es funktioniert gut. Anstatt Minuten zu verbrauchen, um die meisten meiner DOM zu zerstören und neu zu erstellen, dauert es ungefähr 3 Sekunden (das Timing für REST-Aufrufe wird weggelassen). Ich sehe keinen Grund, warum in D3 so etwas wie Property-Updates nicht möglich sein sollte.

Vielleicht, wenn Mike Bostock eine remove() - oder richtige Unterauswahlfunktion zur enter() - Auswahl hinzugefügt hat, könnten wir einem reinen D3-Muster folgen, um Aktualisierungen vorzunehmen. Während ich das herausgefunden habe, habe ich versucht, eine Teilmenge von Daten zu binden, die Daten mit den neuen Eigenschaften, und dann Subselektion, um Elemente zu erhalten, die aktualisiert werden müssen, aber es hat nicht funktioniert, aufgrund der begrenzten und spezifischen Art der Eingabe() Auswahl.