小编atd*_*yer的帖子

JSFiddle示例

我注意到,当在d3-force图中更新svg元素的位置时,使用(在圆圈的情况下)cx和cy属性更新元素的位置比使用transform属性更平滑.

在示例JSFiddle中,有两个单独的力模拟并排.左侧的那个使用transform属性更新位置:

sim_transform.on('tick', function () {
  circles_transform.attr('transform', function (d) {
        return 'translate(' + d.x + ',' + d.y + ')';
  });
});

在使用正确的更新位置的一个cx和cy圆的属性:

sim_position.on('tick', function () {
  circles_position
    .attr('cx', function (d) {
      return d.x;
    })
    .attr('cy', function (d) {
        return d.y;
    })
});

模拟看起来是相同的,直到它们即将变为静态,此时使用变换的模拟开始抖动很多.是什么原因引起了这个？可以修复,以便使用变换动画保持平滑吗？