2012-09-02 36 views
6

Actualmente estoy trabajando en la visualización de la estructura de scripts por lotes escritos por mi predecesor, que simplemente repite SELECT desde algún lugar e INSERT en alguna parte. Intento usar funciones de árbol pero no fue tan flexible de usar cuando deseo que el mismo nombre en el mismo índice de JSON sea reconocido como el mismo nodo.d3.js red de dibujo con diseños de inmovilización

Así que decidí usar la funcionalidad de diseño de fuerza, y casi terminé con la ayuda de googlear. Sin embargo, aunque puedo mapear el mismo grupo de bases de datos o scripts en la misma área para inicializar la parte pero de alguna manera forzar.on ("tick", function() ~~ volver a calcular la distancia entre cada nodo, se volvió realmente complicado. Pero sin esto, no se muestran los enlaces entre nodos

¿alguien sabe cómo inmovilizar la disposición mientras que los enlaces se vuelven a calcular utilizando el JSON Mi código es la siguiente:..

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

Respuesta

0

Si agregue una función como function(d){ d.fixed = true } y haga que se llame a cada nodo durante un tic (o tal vez solo durante el primer tic) y luego tendrá un gráfico estático. De lo contrario, puede llamar al force.stop() después de su bacalao e corre (o lo mismo ocurre durante el primer tic) y logrará lo mismo.

El problema que encontré fue que llamar force.stop() al final de mi bloque de código causó la gráfica para congelar antes de que se había instalado correctamente en el centro de la SVG, y ya que no estaba preocupado por un gráfico estático que hizo una función de evento 'mousedown' que hizo que un nodo se fijara cuando se movió a una ubicación.

0

Usted puede mirar en el estática para la visualización dirigida http://bl.ocks.org/mbostock/1667139

Básicamente, se crea una presentación vigor, asignar nodos y enlaces a él y luego ponerlo en marcha.

A continuación, ejecuta el método force.tick() ticks número de veces. Esto calculará las posiciones de cada nodo en el diseño. Tendrás que experimentar con el valor de ticks para obtener un buen gráfico. Este valor debe aumentarse en proporción a la cantidad de nodos en su gráfico.

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

Tienes que hacer esto antes de que comience el código anterior.

Ahora tiene el objeto force que puede usar para colocar sus nodos y enlaces. Asigne los atributos al nodo y variables de enlace directamente ahora. (Anteriormente se realiza dentro de la función de marca)

Su código se verá así ahora.

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