Question

我正在尝试通过遵循此block来实现D3.js中的缩放行为。

块中有这段代码，我不明白。我知道setTimeout的行为如何，但不确定它是如何以及为何如此使用，以及它如何与其余代码相符。

我已经尝试过调试并仔细检查每个断点，但我不明白它的大局目的或每个阶段发生了什么。

function brushended() {
  var s = d3.event.selection;
  if (!s) {
    if (!idleTimeout) return idleTimeout = setTimeout(idled, idleDelay);
    x.domain(x0);
    y.domain(y0);
  } else {
    x.domain([s[0][0], s[1][0]].map(x.invert, x));
    y.domain([s[1][1], s[0][1]].map(y.invert, y));
    svg.select(".brush").call(brush.move, null);
  }
  zoom();
}

function idled() {
  idleTimeout = null;
}

不确定这类问题（解释一段代码）是否适合堆栈溢出，但我真的想了解这里发生的事情，而不仅仅是复制粘贴解决方案。如果有人能够解释这一点，那就太好了。感谢。

Answer 1

我认为空闲超时部分的目的是设置为在用户双击时缩放回原始视图，但在点击之间移动光标一点点。即当点击距离idleDelay时，它会缩小，而不是放大。您可以通过添加我在下面显示的两个控制台日志语句，同时单步调试代码来更清楚地理解它。尝试双击，然后在点击过程中稍微移动光标。

function brushended() {
  var s = d3.event.selection;
  if (!s) {
    if (!idleTimeout) return idleTimeout = setTimeout(idled, idleDelay);
    x.domain(x0);
    y.domain(y0);
  } else {
    console.log('zoom set')
    x.domain([s[0][0], s[1][0]].map(x.invert, x));
    y.domain([s[1][1], s[0][1]].map(y.invert, y));
    svg.select(".brush").call(brush.move, null);
  }
  zoom();
}

function idled() {
    console.log('idled')
    idleTimeout = null;
}

D3.js中的setTimeout

1 个答案: