title: d3.brush can't get the content
body: <p>I created a brushX that will be able to slide through a context graph and show the zoomed version of the scanned data on a bigger graph. I am aiming to do something similar to the example on this link: <a href="https://codepen.io/jahnreektor/pen/gaXQpz?editors=0010" rel="nofollow noreferrer">https://codepen.io/jahnreektor/pen/gaXQpz?editors=0010</a>    . However even I tried everything I could not get the data. Please help i'm stuck. Here there is my latest version of the code:</p>
  <pre><code>var brush = d3.brushX()
      .extent([[0, 0], [visWidth, contextAreaHeight]])
      .on(&quot;brush&quot;, brushed);
      
  var brushArea = contextVis.append(&quot;g&quot;)
      .attr(&quot;class&quot;, &quot;x brush&quot;)
      .call(brush);
  
      
  function brushed() { 
      xFocus.domain(brush.empty ? xContext.domain() : brush.extent());
      focusVis.select(&quot;line line-rain&quot;).attr(&quot;d&quot;, rainLine);
      focusVis.select(&quot;line line-temp&quot;).attr(&quot;d&quot;, tempLine);
      focusVis.select(&quot;x axis&quot;).call(xContext);
      return d3.brushSelection(this);
   
  }
  </code></pre>