Question

我有一对图表，我希望将其绑定到d3.js zoom（）功能。我查看了d3.js API维基，但还没有关于zoom（）功能的文档。基本上，我希望在用户缩放或拖动其中任何一个时更新两个图形。我看不到如何将缩放行为应用于两个不同的图形。

我创建了一个堆叠图形工作示例的JSFiddle，但缩放功能仅适用于上图：http://jsfiddle.net/G6GPm/2/

我希望在修改任何图形时将缩放和拖动应用于两个图形。我知道我需要修改对zoom（）行为的调用：

rect.call(d3.behavior.zoom().x(x).on("zoom", zoom));

我看到这种行为正在应用于x（x）轴，但是我还需要将它应用于下图的x（x_sta）轴。

我试图打破zoom（）功能，但没有任何API文档，我猜测需要发生什么：

rect.call(d3.behavior.zoom()
  .x(x).on("zoom", zoom)
  .x(x_sta).on("zoom", zoom)
);

这显然失败了。我已经看到了使用多个图形的d3.js交互的其他一些例子，但没有完全像这样（两个不同的图形，它们有自己的轴和数据等）。

提前致谢。

Answer 1

对于其他可能在图表大小不同的情况下这样做的人来说，答案可能会更复杂，我会在问题发生时回答这个问题。但幸运的是，答案很简单......

...对两个图表使用相同的X轴！在这里为你修好了。

http://jsfiddle.net/G6GPm/11/

另一个建议：不要在javascript中设置样式，更喜欢CSS。尝试仅将JS用于attr。

Answer 2

缩放行为具有您可以设置的.translate和.scale属性。解决方案大致如下：

var zoomCallback = function() {
  // do stuff
  zoom1.scale(d3.event.scale).translate(d3.event.translate);
  zoom2.scale(d3.event.scale).translate(d3.event.translate);  
}

var zoom1 = d3.behavior.zoom().x(x).on("zoom", zoomCallback);
var zoom2 = d3.behavior.zoom().x(x_sta).on("zoom", zoomCallback);

rect1.call(zoom1);
rect2.call(zoom2);

d3.js - 在任一图表上使用滚轮/拖动时放大和缩小的滚动图形

2 个答案: