为什么我们需要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事件的情况下进行绘制,如本示例所示.在tick处理程序函数中动态执行此操作具有以下优势:您可以看到布局如何进展.但是,从技术上讲,如果您只对结果感兴趣,则不需要它.