Зачем нам нужно force.on('tick'.. in d3

Я изучаю 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();