2012-09-02 27 views
6

Attualmente sto lavorando con la visualizzazione della struttura di script batch scritti dal mio predecessore che è semplicemente ripetendo SELECT da qualche parte e INSERT da qualche parte. Cerco di utilizzare le funzioni ad albero ma non è così flessibile da utilizzare quando voglio che lo stesso nome nello stesso indice di JSON venga riconosciuto come lo stesso nodo.d3.js disegno rete con layout immobilizzante

Così ho deciso di utilizzare la funzionalità di layout di forza, e ho quasi finito con l'aiuto di googling. Tuttavia, mentre posso mappare lo stesso gruppo di database o script nella stessa area per inizializzare la parte ma in qualche modo force.on ("tick", function() ~~ ricalcola la distanza tra ogni nodo allora è diventato davvero disordinato. Ma senza questo, non mostrano i collegamenti tra i nodi

qualcuno sa come per immobilizzare il layout, mentre i collegamenti sono ri-calcolati utilizzando il JSON il mio codice è simile a questo:..

  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)"; }); }); 
      }); 

risposta

0

Se aggiungi una funzione come function(d){ d.fixed = true } e fai in modo che ogni nodo venga chiamato durante un tick (o forse solo durante il primo tick), quindi avrai un grafico statico, altrimenti puoi chiamare force.stop() dopo il tuo merluzzo e funziona (o similmente durante il primo tick) e compirà lo stesso.

Il problema che ho incontrato è stato che chiamare force.stop() alla fine del mio blocco di codice ha causato il grafico per congelare prima di aver adeguatamente risolta nel centro del SVG, e dato che non era preoccupato per un grafico statico ho fatto un funzione evento 'mousedown' che ha reso fisso un nodo quando è stato spostato in una posizione.

0

Potete guardare lo statico per la visualizzazione diretta http://bl.ocks.org/mbostock/1667139

In sostanza, si crea un layout forza, assegnare nodi e collegamenti ad esso e poi avviarlo.

Quindi si esegue il metodo force.tick() ticks numero di volte. Questo calcolerà le posizioni di ogni nodo nel layout. Dovrai sperimentare il valore di ticks per ottenere un buon grafico. Questo valore dovrebbe essere aumentato in proporzione al numero di nodi nel tuo grafico.

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(); 

È necessario eseguire questa operazione prima dell'avvio del codice precedente.

Ora avete l'oggetto forza che potete usare per posizionare i vostri nodi e collegamenti. Assegna direttamente gli attributi al nodo e alle variabili di collegamento. (In precedenza viene eseguito all'interno della funzione di spunta)

Ora il tuo codice sarà simile a questo.

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