Question

我设法通过焦点/上下文刷和平移/缩放来制作d3.js线+区域图同步，这里有一个小例子：

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

虽然我尝试手动检测平移何时超出边界，然后设置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＆amp; amp;潘，但最终想通了。我发现限制平移的关键是重置缩放行为对象的转换。具体来说，这是我的缩放回调函数：

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

中的一个简单示例

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

2 个答案: