d3.js - d3 强制布局节点总是从屏幕的左上角开始

Question

我有一个强制布局，其节点定义如下...

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。感谢您的任何想法!

Answer 1

我会检查 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;
}