title: How can I draw overlapping graphics in d3.js?
body: <p>I can easily draw single elements in an svg and let them overlay using d3, but I somehow cannot combine joint data with drawn graphics.</p>
  
  <pre><code>svg = d3.select("#widget").append("svg")
      .attr("width","360")
      .attr("height","240")
  svg.append("rect")
      .attr("width","360")
      .attr("height","40")
      .attr("fill","#EDA939")
  dataset = [40,50,60,90,30]
  svg.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("height",5)
      .attr("width",5)
      .attr("x",function(d){return d;})
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/kZrtc.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/4UOWF.png" alt="enter image description here">
  <strong>Unfortunately, one element of my array is missing!</strong> It seems that the placeholder in the svg has been consumed by my background svg.</p>
  
  <p>Now I can switch <code>svg.selectAll("rect")</code> with <code>d3.select("#widget").append("svg").selectAll("rect")</code> so that there is a second svg element, but then I get this:</p>
  
  <p><img src="https://i.stack.imgur.com/D2tdK.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/63YSH.png" alt="enter image description here"></p>
  
  <p><strong>So either one element is missing and they overlay correctly or they do not overlay and all elements are drawn.</strong></p>
  
  <p>What can I do?</p>