D3.js中的setTimeout

我试图通过以下block在D3.js中实现缩放行为。D3.js中的setTimeout

块中有这段代码，我不明白。我知道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; 
}

不知道这类型的问题（解释了一段代码），适合于堆栈溢出，但我真的想了解这里发生了什么，而不是只是复制粘贴的解决方案。如果任何人都可以解释这一点，那会很棒。谢谢。

来源

2017-04-24 akshayKhot

很高兴你问了这个问题。我完全在同一条船上。现在最后我想我从下面的回复中得到一些理解。我希望Mike Bostock的代码得到更好的评论。 –

我认为，当用户双击鼠标时，将光标移动到点击之间时，闲置超时部分的目的就是放大回原始视图。即，当点击数为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; 
}

来源

2017-04-25 00:04:43 gnub

D3.js中的setTimeout

回答

相关问题