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

我有一对图形，我希望将其绑定到d3.js zoom（）功能。我查看了d3.js API维基，但尚未提供zoom（）功能的文档。基本上，我希望在用户放大或拖拽任何一个图形时更新这两个图形。我看不到如何将缩放行为应用于两个不同的图表。d3.js - 在图表上使用滚轮/拖拽时放大和缩小/滚动的堆叠图形

我创建的jsfiddle层叠图形的一个工作示例的，但变焦功能仅适用于上图：http://jsfiddle.net/G6GPm/2/

我想要的变焦和拖动或者被修改时将被施加到两个图。我知道我需要修改调用变焦（）行为：

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

我看到这种行为是被应用到X（X）轴，但我需要它也适用于x（ x_sta）轴的下图。

我试图打破变焦（）函数，但没有任何的API文档我猜需要做些什么：

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

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

在此先感谢。

来源

2012-05-18 tatlar

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

...对两个图都使用相同的X轴！在这里修复它。

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

另一个建议：没有风格的东西在JavaScript，CSS喜欢。尝试仅将JS用于attr。

来源

2012-09-26 05:48:30

非常感谢！ – tatlar

图形分开的另一种情况的确很麻烦。在一个页面上只能有一个缩放行为吗？ – Milimetric

不，一定可以有多种缩放行为，但它们在容器上隐式激活，所以您需要小心哪一个捕捉鼠标事件。如果您需要一个缩放行为来控制多个图表，则需要在缩放行为调用您的函数时调整缩放比例/缩放比例，相应地进行调整并重绘每个图表。 –

缩放行为具有可以设置的.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-22 20:12:43 user1580492

感谢您的评论 - 赞赏 – tatlar

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

回答

相关问题