Javascript d3带缩放和平移的有界力布局

我正在使用缩放和平移（D3.js）进行有界力布局。主要问题是我无法充分定制缩放行为

我的图形包含几个可移动的元素，用户可以通过svg元素移动这些元素。因此，我实现了一个边界框，以防止用户推到图形之外

我以这种方式配置了我的勾号功能：

function tick() {
  // r: radius of a circle ; w: width ; h: height
  node.attr("cx", function(d) { return d.x = Math.max(r, Math.min(w - r, d.x)); })
      .attr("cy", function(d) { return d.y = Math.max(r, Math.min(h - r, d.y)); });

（）

它工作得很好，直到我决定添加缩放和平移功能

我限制了缩放的比例：zoom.scaleExtent（[0.5,2]）

所以我想当我缩小时，我的画会缩小50%，这样做就足够了：

d.x = Math.max(r, Math.min((w*0.5+W) - r, d.x));
d.y = Math.max(r, Math.min((h*0.5+h) - r, d.y));

但是我的图表似乎没有正确的定界，这些公式有问题吗？

此外，由于以下原因，当用户单击空白区域时，整个图形可以拖动：

vis.append('svg:rect')
.attr('width', w)
.attr('height', h)
.attr('fill', 'white');

（）

但是，该矩形可以无限期拖动，并且对于有界力布局不方便。我如何界定它？