焦点/上下文刷亮 + 平移/缩放图 - 如何限制平移

Question

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

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

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

虽然我尝试手动检测平移何时超出边界，然后设置 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）在小上下文图中创建一个画笔区域 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

Answer 2

要限制图表上的平移范围，您可以使用clamp，尽管我看不出您在该小提琴中的哪个位置或是否使用了刻度（实际上它似乎没有工作）。这是fiddle中的一个简单示例