聚焦/上下文刷选+平移/缩放图表-如何限制平移

Question

聚焦/上下文刷选+平移/缩放图表-如何限制平移

3

我已经成功地让d3.js折线区域图与焦点/上下文刷选和平移/缩放同步，这里有一个小例子：http://jsfiddle.net/MtXvx/8/。但我在限制平移时遇到了问题，希望它可以停止在原始域边界处，并且与刷选功能良好配合。这是为了防止用户在视图中丢失图形。

虽然我尝试手动检测何时超出边界，然后设置zoom.translate([0,0])，例如在这些示例中： d3.js散点图 - 缩放/拖动边界、缩放按钮、重置缩放、计算中位数 D3.js中缩放或平移时限制域 d3.js散点图 - 缩放/拖动边界、缩放按钮、重置缩放、计算中位数 ...如我在183行中所做的那样。

 //If exceed original domain, limit panning by resetting translate
if (x.domain()[0] < x0.domain()[0]) {
    zoom.translate([0, 0]);
}

当以下情况发生时会出现问题： 1）在小上下文图中创建画刷区域 2）将大焦点图向最早的日期滑动 3）当滑动接近边界时图形会跳动。

如果有任何帮助防止跳动发生或限制平移（以及最终缩小）到原始域边界的其他方法，我们将不胜感激。

关于限制缩小，设置：

var zoom = d3.behavior.zoom().x(x).scaleExtent([1,10]).on("zoom", zoomed);

...因为缩小的范围将受限于刷子区域，而不是图形数据的全部范围，所以无法很好地工作。

非常感谢！

- Cindy

你成功完成了吗？你能上传一个例子吗？ - Arnon

2个回答

0

为了限制图表上的平移范围，您可以使用clamp，不过我并没有看到您在那个小例子中是否使用了比例尺（实际上似乎没有起作用）。这里有一个简单的示例在fiddle中。

- user1614080

1

谢谢您的回复！这是我第一次使用fiddle，所以我没有注意到我的进一步编辑没有保存。这是工作链接：jsfiddle.net/MtXvx/8。我会研究clamp的，谢谢。 - Cindy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon · Accepted Answer

我曾经遇到过类似的问题，即如何将D3 Brushing和Zoom & Pan结合起来，但最终还是解决了。我发现限制平移的关键在于重置缩放行为对象的平移。具体来说，这是我的缩放回调函数：

function zoomed() {
  var t =   d3.event.translate;
  var s =   d3.event.scale;
  var size = width*s;
  t[0] = Math.min(t[0], 0);
  t[0] = Math.max(t[0], width-size);
  zoom.translate(t);
  focus.select(".area").attr("d", area);
  focus.select(".x.axis").call(xAxis);
  var brushExtent = [x.invert(0), x.invert(width)];
  context.select(".brush").call(brush.extent(brushExtent));
}

虽然这不是你的问题的一部分，但为了使整个演示正常工作，更新缩放、平移和比例尺也是一个重要的部分，因此这是我的brushed回调函数：

function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  focus.select(".area").attr("d", area);
  focus.select(".x.axis").call(xAxis);
  var s = x.domain();
  var s_orig = x2.domain();
  var newS = (s_orig[1]-s_orig[0])/(s[1]-s[0]);
  var t = (s[0]-s_orig[0])/(s_orig[1]-s_orig[0]); 
  var trans = width*newS*t;
  zoom.scale(newS);
  zoom.translate([-trans,0]);
}

这是一个基于D3示例的完整示例：http://bl.ocks.org/sbreslav/be9af0d809b49864b7d8