d3.js - Focus/Context Brushing + Pan/Zoom graph - 如何限制平移

Question

我已经设法使 d3.js 线+面积图与焦点/上下文刷和平移/缩放同步，这里有一个小例子:

http://jsfiddle.net/MtXvx/8/

我无法将平移限制在原始域边界处停止，同时还可以很好地使用画笔。这是为了防止用户在他们的 View 中丢失图形。

虽然我尝试手动检测平移何时超出边界，然后设置 zoom.translate([0,0])，例如在这些示例中: d3.js scatter plot - zoom/drag boundaries, zoom buttons, reset zoom, calculate median Limiting domain when zooming or panning in D3.js d3.js scatter plot - zoom/drag boundaries, zoom buttons, reset zoom, calculate median

...正如我在第 183 行所做的那样:

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

问题发生在:1)在small context graph中创建画笔区域2) 将大焦点图一直平移到最早的日期3) 平移快到边界时图形跳动

如果有任何帮助可以防止发生跳跃，或者是否有任何其他方法可以将平移(以及最终缩小)限制到原始域边界，我们将不胜感激。

关于限制缩小，设置:

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

...效果不佳，因为缩小将仅限于画笔区域，而不是图形数据的整个范围。

非常感谢!

Answer 1

我在结合 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));
}

虽然不是您问题的一部分，但使整个演示正常工作的一个重要部分是在完成刷亮后更新缩放平移和缩放，所以这是我刷过的回调:

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