将 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() 作为zoom 行为的y 标度，并在zoomed 函数中完全自己管理原始y 标度的domain。