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力布局节点总是在开始屏幕

回答

相关问题