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

标签 javascript jquery svg d3.js

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

最佳答案

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

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

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

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

关于javascript - 将 d3.js 图表的平移限制为一个方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20722027/

相关文章:

php - 帮助 JS 表单验证

javascript - 使用 jquery 或 javascript 解析 cdata 中的 html

javascript - 如何禁用多个滚动功能?

html - <svg> 元素匹配子元素的宽度和高度

javascript - 如何将表单提交到新窗口?

javascript - babel-loader 不转换 webpack.config.js

javascript - 我有多个带有复选框及其值的 <td>。我想更改 <td> 的颜色

javascript - 无法获取上一个元素?

image - SVG 图像作为页面背景 xamarin

SVG用一条线连接两点