javascript - 为什么我们需要 force.on ('tick' .. 在 d3

Question

我正在通过从基础编写力导向图来学习 d3。我的代码在下面。我不明白的是 force.on('tick'...

当然，如果我们为布局使用内置类，我会认为给 d3.layout.force() 节点和链接就足够了，它应该能够以平衡布局绘制图形.

如果我注释掉 force.on('tick'... 部分，那么我所有的圆圈和线条都会在左上角结束。内部发生的事情之间有区别吗以及 svg 容器中发生了什么，因此我们需要 force.on('tick' 来重新绘制布局以每次都匹配当前的内部值集？

var nodes = [
      {},
      {},
      {}
];

var links = [
      {'source': 0, 'target': 1}
];

// append svg element to container
var mychart = d3.select('#chart')
      .append('svg')
      .attr('width', w)
      .attr('height', h);

// create force layout in memory
var force = d3.layout.force()
      .nodes(nodes)
      .links(links)
      .size([w, h]);

// append a group for each data element
var node = mychart.selectAll('circle')
      .data(nodes).enter()
      .append('g')
      .call(force.drag);

// append circle onto each 'g' node
node.append('circle')
      .attr('fill', palette.green)
      .attr('r', circleWidth);


/*force.on('tick', function(e) {
      node.attr('transform', function(d, i) {
            return 'translate('+ d.x +', '+ d.y +')';
      })

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


var link = mychart.selectAll('line')
      .data(links).enter()
      .append('line')
      .attr('stroke', palette.gray)

force.start();

Answer 1

强制布局异步运行。也就是说，当您调用 force.start() 时，它会开始进行计算，以确定节点在后台的并行位置。这些计算不是一步，而是长时间(几秒)运行的模拟。

tick 处理程序是一个函数，它使您能够在布局发生变化时获取布局状态(模拟已提前一个刻度)并对其进行操作——特别是重绘它们当前在模拟中的节点和链接。

虽然您不必处理 tick 事件，您可以简单地运行布局一定数量的步骤，然后在不处理 tick 事件的情况下进行绘制所有，如 this example .在 tick 处理函数中动态执行它的好处是您可以看到布局的进展情况。但是，从技术上讲，如果您只对结果感兴趣，则不需要。