4

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

提前致谢。

4

2 回答 2

3

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

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

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

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

于 2012-09-26T05:48:30.507 回答
1

缩放行为具有您可以设置的 .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);
于 2013-01-22T20:12:43.713 回答