D3力佈局節點總是在開始屏幕

的左上角我有力量的佈局，定義如下節點...D3力佈局節點總是在開始屏幕

nodes = someData.map(function (d) { 
     return { 
      image_location: d.image_location, 
      image_width: d.image_width, 
      image_height: d.image_height, 
      aspect_ratio: d.aspect_ratio, 
      radius: circleRadiusScale(d.someCount), 
      x: width/2, 
      y: height/2, 
      px: width/2, 
      py: height/2, 
      cx: width/2, 
      cy: height/2 
     }; 
    });

然後被用在後面的代碼產生的力佈局...

force = d3.layout.force() 
    .gravity(.05) 
    .alpha(0.1) 
    .size([width, height]) 
    .on("tick", tick); 

force.nodes(nodes) 
     .start();

我強迫X/Y的原因，PX/PY，CX/CY值是我只是想確保節點不總是從左上角投影瀏覽器（這是隻有一秒鐘，直到強制模擬生效，但是非常明顯，特別是在Firefox或移動開發冰）。

我覺得很奇怪的是，我在我寫的代碼加入了我的x/y，cx/cy，px/py值之前開始了佈局，換句話說，這個代碼來定義後/啓動力佈局...

node = svg.selectAll(".node") 
       .data(force.nodes(), function(d) { return d.id; }) 
       .enter()   
       .append("g") 
       .attr("class", "node") etc to append circles, images...

所以我不知道如何通過瀏覽器忍住節點的投影，直到我知道力佈局的初始位置除0,0之外的東西。感謝您的任何想法！

來源

2015-10-20 d3wannabe

我會檢查tick處理函數內的位置和初始化一旦條件得到滿足：

var initialized = false; 
force.on("tick", function() { 
    if(!initialized) { 
    // can also check multiple nodes here... 
    if(nodes[0].x != width/2 && nodes[0].y != height/2) initialize(); 
    } else { 
    // update node positions 
    } 
}); 

function initialize() { 
    node = svg.selectAll(".node") 
      .data(force.nodes(), function(d) { return d.id; }) 
      .enter()   
      .append("g") 
      .attr("class", "node") // etc 
    initialized = true; 
}

來源

2015-10-20 16:35:32

感謝拉爾斯 - 這是固定的完全的問題 - 只需要確保1個滴答發生了什麼我繪製之前任何圈子，圖像等頁面上。 – d3wannabe

在這種情況下，您甚至可以在啓動之後和添加處理程序之前調用'force.tick（）'。 –

在我的情況下，inited和呼叫前打勾顯示的節點（）。所以他們將首先顯示在屏幕的左上角，然後調用tick（）將其轉換爲圖中的實際位置。蜱（

nodeEnter.style("visibility", "hidden")

而且，可見）功能：就隱藏節點時添加圖形

nodeEnter.style("visibility", "visible")

來源

2015-11-10 14:22:33 BlackDen

D3力佈局節點總是在開始屏幕

回答

相關問題