D3.jsのsetTimeout

Question

D3.jsでズーム動作を実装しようとしていますが、これはblockに従います。

ブロック内にこのコードがありますが、わかりません。 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離れている場合、ズームインする代わりに、ズームインします。 以下に示す2つのコンソールログステートメントを追加することで、わかりやすくわかります。ダブルクリックして、クリック中にカーソルを少し動かしてみてください。

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; 
}