Podstawy D3 Force reżyserii Układ

Question

mam orki w ekscytującym świecie układów sił skierowane z d3.js. Mam zrozumienie podstaw d3, ale nie mogę dowiedzieć się podstawowy system konfigurowania układu sił w reżyserii.

Teraz staram się stworzyć prosty układ z kilku niepołączonych pęcherzyków, które unoszą się do centrum. Całkiem proste, prawda? Okręgi z poprawnymi są tworzone, ale nic się nie dzieje.

Edycja: problem wydaje się być to, że force.nodes() powraca początkowy tablicy danych. W skryptach roboczych force.nodes() zwraca tablicę obiektów.

Oto mój kod:

<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

Tu był problem. Tablica, którą podajesz do force.nodes(array), musi być tablicą obiektów.

Więc:

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

prace. Lub nawet tylko

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

sprawia grzywny pracy skryptu.

Answer 2

Musisz zaktualizować cx i cy w force.on obsługi.

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

i funkcje deltaX i deltaY zależy od modelu siły.