javascript - 将 d3.js 图表的平移限制为一个方向

Question

pannable & zoomable chart here允许在 X 和 Y 方向上平移。我们如何才能将平移限制在水平方向？缩放应该仍然像原来一样在两个方向上工作。

Answer 1

如果你想一直放大和缩小 y-axis在限制平移的同时，您最终会获得相当奇怪的用户体验。此外，通过放大一点和缩小另一点，用户将能够平移y-axis。无论如何。

但是，您可以通过更改 yAxis 来做到这一点仅当它是一个scale 事件时(即 d3.event.scale 变化 > 1e-5 )。

借用@Nouphal.M 的例子:http://jsfiddle.net/tmFSF/1/

请注意 y规模仍然在变化。因此，如果您重新绘制图表，元素的位置仍然会有所不同。要解决这个问题，您可能需要使用 y.copy()作为y zoom 的规模行为和管理 domain原件y在 zoomed 中完全自己扩展功能。