d3.js Zeichnen von Netzwerken mit immobilisierenden Layouts

Question

Ich arbeite gerade an der Visualisierung der Struktur von Batch-Skripten, die von meinem Vorgänger geschrieben wurden, der einfach SELECT von irgendwo wiederholt und INSERT irgendwo einfügt. Ich versuche, Baumfunktionen zu verwenden, aber es war nicht so flexibel zu verwenden, wenn ich möchte, dass der gleiche Name in demselben Index von JSON als derselbe Knoten erkannt wird.

Also entschied ich mich für die Verwendung von Force-Layout-Funktionalität und war fast fertig mit etwas Googeln. Während ich jedoch die gleiche Gruppe von Datenbanken oder Skripten im gleichen Bereich für die Initialisierung Teil zuordnen kann, aber irgendwie force.on ("tick", function() ~~ neu berechnen den Abstand zwischen den einzelnen Knoten, dann wurde es wirklich chaotisch. Aber ohne Dabei wird es nicht um die Verbindungen zwischen den Knoten zeigen

Wer weiß, wie das Layout zu immobilisieren, während Links neu berechnet werden, um die JSON mit Mein Code ist wie folgt:..

  node.append("circle") 
       .attr("cx", function(d) { return d.group*70; }) 
       .attr("cy", function(d) { return d.index*10; }) 
       .attr("r", 10) 
       .attr("fill", function(d) { 
        return "rgb(" + (255 - d.group*20) + ",0,"+(d.group*50) + ")"; 
       }); 

      node.append("text") 
       .attr("dx", function(d){return d.group*70;}) 
       .attr("dy", function(d){return d.index*10;}) 
       .text(function(d) { return d.name }); 
      force.on("tick", function() { 
       alert(debugPrint(this)); 
       link.attr("x1", function(d) { return d.source.x; }) 
        .attr("y1", function(d) { return d.source.y; }) 
        .attr("x2", function(d) { return d.target.x; }) 
        .attr("y2", function(d) { return d.target.y; }); 

       node.attr("transform", function(d) { 
        return "translate(" + d.x + "," + d.y + ")"; 
       }); 
       //node.attr("transform", function(d) { return "translate(0)"; }); }); 
      }); 

Answer 1

Wenn Sie Fügen Sie eine Funktion wie function(d){ d.fixed = true } hinzu und rufen Sie jeden Knoten während eines Ticks (oder vielleicht nur während des ersten Ticks) auf, dann haben Sie einen statischen Graphen, ansonsten können Sie force.stop() nach Ihrem Code aufrufen e läuft (oder ebenso während des ersten Ticks) und es wird dasselbe erreichen.

Das Problem, das ich antraf, war, dass das Aufrufen von force.stop() am Ende meines Codeblocks das Diagramm einfrieren ließ, bevor es sich in der Mitte des SVG richtig eingerichtet hatte, und da ich keine Angst vor einem statischen Graphen hatte 'mousedown' Ereignisfunktion, die einen Knoten beim Verschieben an einen Ort fixiert hat.

Answer 2

Sie bei der statischen zur gezielten Visualisierung http://bl.ocks.org/mbostock/1667139

Grundsätzlich sehen können, können Sie eine Kraft Layout erstellen, weisen Knoten und Verbindungen zu ihm und es dann starten.

Dann führen Sie die force.tick() Methode ticks Anzahl Male. Dies berechnet die Positionen jedes Knotens im Layout. Sie müssen mit dem Wert ticks experimentieren, um ein gutes Diagramm zu erhalten. Dieser Wert sollte proportional zur Anzahl der Knoten in Ihrem Diagramm erhöht werden.

force = d3.layout.force(); 

ticks=2000; //number of ticks for calculating the force layout 

force 
    .nodes(nodes) //nodes = array of nodes 
    .links(links) //links = array of links 
    .start(); 

for (var i = ticks; i > 0; --i) force.tick(); 

force.stop(); 

Sie müssen dies tun, bevor der obige Code beginnt.

Jetzt haben Sie das Force-Objekt, mit dem Sie Ihre Knoten und Links positionieren können. Weisen Sie die Knoten- und Link-Variablen jetzt direkt den Attributen zu (zuvor innerhalb der Tick-Funktion)

Ihr Code wird jetzt so aussehen.

node.append("circle") 
    .attr("cx", function(d){return d.group*70; }) 
    .attr("cy", function(d){return d.index*10;}) 
    .attr("r", 10) 
    .attr("fill",function(d){ 
     return "rgb(" + (255 - d.group*20) + ",0,"+(d.group*50) + ")" 
    }) 
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

node.append("text") 
    .attr("dx", function(d){return d.group*70;}) 
    .attr("dy", function(d){return d.index*10;}) 
    .text(function(d) { return d.name }); 

link.attr("x1", function(d) { return d.source.x; }) 
    .attr("y1", function(d) { return d.source.y; }) 
    .attr("x2", function(d) { return d.target.x; }) 
    .attr("y2", function(d) { return d.target.y; });