Grundlagen des kraftgesteuerten Layouts von D3

Question

Ich stoße mit d3.js in die aufregende Welt der kraftgesteuerten Layouts. Ich habe die Grundlagen von d3 verstanden, aber ich kann mir das grundlegende System für die Einrichtung eines kraftgesteuerten Layouts nicht vorstellen.

Im Moment versuche ich, ein einfaches Layout mit ein paar nicht verbundenen Blasen, die in der Mitte schweben. Ziemlich einfach richtig !? Die Kreise mit den richtigen werden erstellt, aber nichts passiert.

Edit: das Problem scheint zu sein, dass die force.nodes() das anfängliche Datenarray zurückgibt. Bei aktiven Skripten gibt force.nodes() ein Array von Objekten zurück.

Hier ist mein Code:

<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

Hier war das Problem. Das Array, das Sie in force.nodes(array) einfügen, muss ein Array von Objekten sein.

So:

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

funktioniert. Oder auch nur

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

macht das Drehbuch gut funktionieren.

Answer 2

Sie benötigen cx und cy in force.on Handler zu aktualisieren.

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

und Funktionen deltaX und deltaY hängt von Ihrem Kraftmodell.