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

...不能很好地工作，因为缩小将仅限于画笔区域，而不是图形数据的全部范围。

非常感谢！

4

2 回答 2

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

于 2015-11-30T02:33:10.867 回答
0

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

于 2013-10-05T08:23:57.177 回答