Question

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

我的图表包含几个可移动元素，用户可以通过svg-element移动。所以我实现了一个边界框，以防止用户超出图形。

我以这种方式配置了我的tick函数：

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

（http://bl.ocks.org/mbostock/1129492）

在我决定添加缩放和平移功能之前，它一直运行良好。

我限制了缩放比例：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');

（Is there a way to zoom into a D3 force layout graph?）

但是这个矩形可以无限拖动，并且对于有界力布局来说不方便。我该如何划界？

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

0 个答案: