title: D3.js Independent Charts and Divs Overlapping
body: <p>I have <a href="http://colinwhite.net/DxCptInf/Graph.html" rel="nofollow">two histograms with .on("mouseover") listeners</a>. Each is bound to a unique div id. For some reason they plot on the same SVG element.</p>
  
  <p>I've tried to follow the pattern from <a href="http://www.d3noob.org/2013/07/arranging-more-than-one-d3js-graph-on.html" rel="nofollow">"D3 Tips and Tricks"</a> ...</p>
  
  <pre><code>&lt;div id="Dx"&gt;&lt;/div&gt;
     &lt;script src="Dx.js" type="text/javascript"&gt;&lt;/script&gt; 
  &lt;div id="Cpt"&gt;&lt;/div&gt;
     &lt;script src="Cpt.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The code for the <a href="http://colinwhite.net/DxCptInf/Dx.js" rel="nofollow">"Dx.js"</a> chart is very similar to the <a href="http://colinwhite.net/DxCptInf/Cpt.js" rel="nofollow">"Cpt.js"</a> chart. </p>
  
  <p>I define the svg container and append to my unique div ID with </p>
  
  <pre><code>var svg = d3.select("#Cpt").append("svg")
  </code></pre>
  
  <p>later I <code>svg.selectAll("#Cpt.bar")</code> before <code>data(data).enter().append("rect")</code>.</p>
  
  <p>Can anyone help me understand what I'm doing wrong?</p>