在任一图形上使用滚轮/拖动时放大和缩小/滚动的堆叠图形

stacked graphs that are both zoomed in and out/scrolled when using scrollwheel/drag on either graph

本文关键字：图形 缩小 放大 滚动 拖动 任一      更新时间：2023-09-26

我有一对图形，我希望它与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 交互的其他一些示例，但没有像这样(两个不同的图形具有自己的轴和数据等(。

提前谢谢。

对于可能在图形大小不同的情况下执行此操作的其他人，答案可能更复杂，我会在它发生时回答这个问题。但幸运的是，答案很简单...

。对两个图形使用相同的 X 轴！在这里为您修复了它。

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

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

缩放

行为具有您可以设置的 .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);
相关文章：