Question

我试图实现一个图表框架，该图表框架能够为每个方向创建具有多个轴的线和面积图，即2-y轴左，1-y轴右和1-x轴底。

我开始工作了。我的下一个任务是对图表实施缩放行为。我缩进了全局缩放行为，如果用户在绘图区域内使用鼠标，则会触发该行为。显示的系列将重新调整，并且可以平移绘图。这个我也开始工作了。

此外，我想为每个轴进行独立的缩放/缩放。我得到了缩放，但我仍然遇到全局缩放和平移的问题。如果我缩放一个轴，则绘图区域中的相关系列将重新缩放，但平移不起作用。在对轴进行独立缩放后，如果我使用全局重新缩放，缩放将被重置，然后通过全局缩放行为进行缩放。

在d3.js页面上，我发现了一个简单的example用于独立和全局缩放和平移，但是用d3v3编写。

我以这种方式更改了示例，以便显示我的问题jsfiddle demo。在轴和绘图区域使用鼠标。

msg = "The bird is {}, its beak is {}, its wings are {}".format(self.noise, 
       self.beak, self.wings)

简单说一下：如何通过使用d3v4创建一个具有全局和独立缩放和平移行为的多个轴的图表来解决我的问题？

Answer 1

截至目前，当前版本的d3v4本身并不支持多种独立的缩放行为。

一种可能的解决方案是重置存储在您调用适当缩放行为的选择内部的内部转换状态。论证已经有open issue，我鼓励你去阅读并提供你的意见。

祝你好运！

Answer 2

似乎没有正确的解决方案（请参见https://github.com/d3/d3-zoom/issues/48）。

But if you clear the scale after each zoom it seems to work （请参阅https://jsfiddle.net/DaWa/dLmp8zk8/2/）。