d3.js - 叠加图表，同时支持缩放和滚动，可通过鼠标滚轮或拖动实现。

Question

我有一对图表，希望将它们与d3.js的zoom()功能相结合。我在d3.js API wiki上查看，但尚未找到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交互的示例，但没有像这样的（两个具有自己轴线和数据等的不同图表）。

提前致谢。

- tatlar

Answer 1

对于那些在图形大小不同的情况下进行此操作的其他人，答案可能更加复杂，当出现这种情况时，我将回答该问题。但幸运的是，对于您来说，答案很简单......使用相同的X轴来绘制两个图形！已经为您修复了此问题。

另一个建议：不要在JavaScript中设置样式，应优先使用CSS。尝试仅使用JS进行attr。

链接：http://jsfiddle.net/G6GPm/11/

- Andrew Mao

---

另一种图形分离的情况确实相当麻烦。页面上只能有一个缩放行为吗？ - Milimetric

不，肯定可以有多个缩放行为，但它们会在容器上隐式激活，因此您需要注意哪一个正在捕获鼠标事件。如果您需要一个缩放行为来控制多个图表，您需要在缩放行为调用您的函数时获取缩放平移/比例，相应地进行调整，并重新绘制每个图表。 - Andrew Mao

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

- user1580492

---

感谢您的评论 - 非常感激。 - tatlar