3

我正在使用缩放和平移（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)); });

( 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');

（有没有办法放大 D3 力布局图？）

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

4

0 回答 0