d3平移/缩放使用shift和ctrl键动态锁定x / y轴

时间:2014-07-22 10:58:18

标签: javascript d3.js

我们要求修改d3缩放行为,以便在平移或缩放操作期间按下 shift 键时,视觉将仅在x轴上缩放/变换。 此外,当按下 ctrl 键时,视觉将仅在y轴上缩放/变换。 我们确实希望在锁定开启的同时进行拉伸或压缩x / y轴。

由于我们希望在我们的系统中普遍使用此行为,因此我们修改了d3.js文件中的translateToscaleTo方法。 当按下 shift / ctrl 时,这个修改确实需要我们想要的但是当执行没有修改器按钮的下一个缩放/平移操作时,可视化将跳转到视图的方式出现时没有按下 shift ctrl 按钮。

我不确定为什么显示器的行为如此,但我们非常接近得到我们需要的任何建议或帮助解决这个问题将不胜感激。

function translateTo(p, l) {
  l = point(l);

  // Note: Added by for axis lock zooming
  if (d3.event.shiftKey) {
      view.y += p[1] - l[1];
  }
  else if (d3.event.ctrlKey) {
      view.x += p[0] - l[0];
  } else {
      view.x += p[0]-l[0];
      view.y += p[1]-l[1];
  }
}
function rescale() {
    if (x1) x1.domain(x0.range().map(function (x) {
        // Note: Added for axis lock zooming
        if (d3.event.shiftKey) {
            return x;
        } else {
            return (x - view.x) / view.k;
        }
  }).map(x0.invert));
    if (y1) y1.domain(y0.range().map(function (y) {
        // Note: Added for axis lock zooming
        if (d3.event.ctrlKey) {
            return y;
        } else {
            return (y - view.y) / view.k;
        }
  }).map(y0.invert));
}

0 个答案:

没有答案