d3.js使用固定佈局繪製網絡

Question

我目前正致力於可視化由我的前任編寫的批處理腳本的結構，該處理只是簡單地從某處重複SELECT並將其插入某處。我嘗試使用樹函數，但是當我想在同一個JSON索引中將相同名稱識別爲同一節點時，它使用起來並不靈活。

因此，我決定使用強制佈局功能，並幾乎完成了谷歌搜索的一些幫助。然而，儘管我可以將同一組數據庫或腳本映射到同一區域來初始化零件，但以某種方式force.on（「tick」，function（）~~重新計算每個節點之間的距離，然後它變得非常混亂。但是沒有這一點，它不會顯示節點之間的鏈接

有誰知道如何固定的佈局，同時鏈接使用JSON重新計算 我的代碼是這樣的：。

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

Answer 1

如果您添加一個像function(d){ d.fixed = true }這樣的函數，並在每個節點上打勾（或者只是在第一次打勾期間），然後你將得到一個靜態圖，否則你可以在你的鱈魚之後調用force.stop() e運行（或者在第一次滴答時也是如此），並且它將完成相同的操作。

我遇到的問題是，在代碼塊末尾調用force.stop()導致圖形在SVG中心正確定位之前凍結，並且由於我不關心靜態圖形，所以我製作了一個圖形'mousedown'事件功能，它在移動到某個位置時修復了一個節點。

Answer 2

你可以看一下靜態用於定向可視化http://bl.ocks.org/mbostock/1667139

基本上，你創建一個力佈局，分配節點和鏈接到它，然後啓動它。

然後運行force.tick（）方法ticks次數。這將計算佈局中每個節點的位置。您將不得不嘗試使用ticks的值來獲得良好的圖表。該值應該與圖中節點的數量成比例增加。

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

您必須在上面的代碼開始前執行此操作。

現在，您已經擁有了可用於定位節點和鏈接的強制對象。 現在直接指定節點和鏈接變量的屬性（以前在tick函數中完成）

您的代碼現在看起來像這樣。

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