Error: <g> attribute transform: Trailing garbage, "translate(0,NaN)" on dc.js brushing
<p>The purpose of my code is to use the range chart(bar chart) that shows the count of the datasets produced in years, to brush on the focus chart(line chart). The focus chart then displays the count on the monthly basis. My code is <a href="https://plnkr.co/edit/7ER8fwtZTyUNHllbSMwK?p=preview" rel="noreferrer">here</a> . It seems to be working fine when I select a big range through the brush. However, when I select small range like: 1 or 2 bars, it shows me the following error</p>

<pre><code> Error: &lt;g&gt; attribute transform: Trailing garbage, "translate(0,NaN)".    d3.v3.min.js:4 
</code></pre>

<p>Moreover, it does not filter the focus chart as well then. I will appreciate any help</p>