Conceptos básicos del diseño dirigido por la fuerza de D3

Question

Estoy adentrándome en el apasionante mundo de los diseños dirigidos por la fuerza con d3.js. Tengo una idea de los fundamentos de d3, pero no puedo entender el sistema básico para configurar un diseño dirigido por la fuerza.

En este momento, estoy tratando de crear un diseño simple con algunas burbujas inconexas que flotan en el centro. Muy simple, ¿verdad? Se crean los círculos con el correcto, pero no pasa nada.

Edición: el problema parece ser que force.nodes() devuelve la matriz de datos inicial. En las secuencias de comandos de trabajo, force.nodes() devuelve una matriz de objetos.

Aquí está mi código:

<script> 
    $(function(){ 

    var width = 600, 
     height = 400; 

    var data = [2,5,7,3,4,6,3,6]; 


    //create chart 
    var chart = d3.select('body').append('svg') 
     .attr('class','chart') 
     .attr('width', width) 
     .attr('height', height); 

    //create force layout 
    var force = d3.layout.force() 
     .gravity(30) 
     .alpha(.2) 
     .size([width, height]) 
     .nodes(data) 
     .links([]) 
     .charge(30) 
     .start(); 

    //create visuals 
    var circles = chart.selectAll('.circle') 
     .data(force.nodes()) //what should I put here??? 
     .enter() 
     .append('circle') 
     .attr('class','circles') 
     .attr('r', function(d) { return d; }); 

    //update locations 
    force.on("tick", function(e) { 
     circles.attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 
    }); 

    }); 


</script> 

Answer 1

Aquí estaba el problema. La matriz que alimenta en force.nodes(array) debe ser una matriz de objetos.

Así:

var data = [{number:1, value:20}, {number:2, value:30}...];

obras. O incluso sólo

var data=[{value:1},{value:2}];

hace que el trabajo fino guión.

Answer 2

Es necesario actualizar y cxcy en force.on manejador.

//update locations 
force.on("tick", function(e) { 

    circles.attr("cx", function(d) { return d.x - deltaX(d, e) ; }) 
    .attr("cy", function(d) { return d.y - deltaY(d, e); }); 
}); 

y funciones deltaX y deltaY depende del modelo de la fuerza.