D3強制導向佈局的基礎知識

Question

我正在用d3.js進入強制導向佈局的激動人心的世界。我已經掌握了d3的基礎知識，但我無法弄清楚建立武力導向佈局的基本系統。

現在，我正嘗試創建一個簡單的佈局，其中有一些浮動到中心的未連接的氣泡。很簡單的權利！？創建了正確的圓圈，但沒有任何反應。

編輯：問題似乎是force.nodes（）返回初始數據數組。在工作腳本上，force.nodes（）返回一個對象數組。

這裏是我的代碼：

<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

這是問題所在。您提供給force.nodes(array)的數組需要是一個對象數組。

所以：

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

作品。甚至只是

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

使腳本做工精細。

Answer 2

您需要force.on處理程序來更新cx和cy。

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

而且功能deltaX和deltaY取決於你的力模型。