title: Programmatically triggering a D3 brush event
body: <p>I have seen examples <a href="https://bl.ocks.org/micahstubbs/3cda05ca68cba260cb81" rel="nofollow noreferrer">here</a> and <a href="http://bl.ocks.org/timelyportfolio/5c136de85de1c2abb6fc" rel="nofollow noreferrer">here</a> were a brush is triggered in JavaScript. I want to understand the implementation of the <a href="https://bl.ocks.org/micahstubbs/3cda05ca68cba260cb81" rel="nofollow noreferrer">first</a> one.</p>
  
  <p><strong>Background</strong></p>
  
  <p>The <a href="https://bl.ocks.org/micahstubbs/3cda05ca68cba260cb81" rel="nofollow noreferrer">first example</a> bundles two D3 line charts in a single svg container; classes <code>focus</code> and <code>context</code>, respectively:</p>
  
  <p><a href="https://i.stack.imgur.com/41O7E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/41O7E.png" alt="Stubbs brush example"></a> </p>
  
  <p>The <code>context</code> chart (marked in light blue, above) is the one containing the brush, which can be triggered by a mouse click:</p>
  
  <p><a href="https://i.stack.imgur.com/xn9c5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xn9c5.png" alt="enter image description here"></a></p>
  
  <p>When we look inside its group container, we find the designated brush parameters; under the <code>extent</code> class:</p>
  
  <p><a href="https://i.stack.imgur.com/YDjVP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YDjVP.png" alt="enter image description here"></a></p>
  
  <p><strong>Question 1.</strong></p>
  
  <p>I don't understand what happens in the last two lines, <em>in particular the last line</em>:</p>
  
  <pre class="lang-js prettyprint-override"><code>function drawBrush(a, b) {
        // define our brush extent
  
        // note that x0 and x1 refer to the lower and upper bound of the brush extent
        // while x2 refers to the scale for the second x-axis, for context or brush area.
        // unfortunate variable naming :-/
        var x0 = x2.invert(a*width)
        var x1 = x2.invert(b*width)
        console.log("x0", x0)
        console.log("x1", x1)
        brush.extent([x0, x1])
  
        // now draw the brush to match our extent
        // use transition to slow it down so we can see what is happening
        // set transition duration to 0 to draw right away
        brush(d3.select(".brush").transition().duration(500));
  
        // now fire the brushstart, brushmove, and brushend events
        // set transition the delay and duration to 0 to draw right away
        brush.event(d3.select(".brush").transition().delay(10duration(500))
  }
  </code></pre>
  
  <p>In <code>brush(d3.select(".brush").transition().duration(500));</code>, the current brush parameters are selected with a transition precondition; which is passed to <code>brush</code>, so it can draw the new brush according to the changed <code>brush.extend</code> values.</p>
  
  <p>In <code>brush.event(d3.select(".brush").transition().delay(10duration(500))</code>, it seems that the previous line sets the parameters, after which <code>brush.event</code> <em>executes</em> with the new brush parameters. Can someone make sense of this? How do the <a href="https://github.com/d3/d3-brush#brush-events" rel="nofollow noreferrer">brush events</a> apply to this case?</p>
  
  <p><strong>Question 2.</strong></p>
  
  <p>I also don't see how exactly, this event action gets linked back to the <code>focus</code>ed chart. If find the mechanisms via callbacks quite cryptic:</p>
  
  <pre class="lang-js prettyprint-override"><code>var brush = d3.svg.brush()
        .x(x2)
        .on("brush", brushed);
  </code></pre>
  
  <p>This snippet seems crystal-clear: <em>the</em> brush is made and linked to the <code>brush</code> event listener. On a brush event, brushed will act as the event handler. Furthermore, the scale of <code>context</code>'s x-axis <code>x2</code> is passed to the brush, as it sits on the <code>context</code> chart.</p>
  
  <p>But I'm not quite sure how <code>brushed</code> works:</p>
  
  <pre class="lang-js prettyprint-override"><code>  function brushed() {
      x.domain(brush.empty() ? x2.domain() : brush.extent());
      focus.select(".area").attr("d", area);
      focus.select(".x.axis").call(xAxis);
    }
  </code></pre>
  
  <p>Just to be sure, is it correct that a new axis is generated in <code>focus.select(".x.axis").call(xAxis);</code> with the <code>brush</code> parameters set in <code>x.domain(brush.empty() ? x2.domain() : brush.extent());</code>?</p>