title: How to append multiple rectangles in D3?
body: <p>I´m wondering if it is possible to append multiple rectangles per datapoint.
  In my example there are three datapoints.
  For each I try to create 2 rectangles.
  In the end there have to be 6 rectangles. 3 in red, 3 in blue.
  <a href="https://i.stack.imgur.com/HVug4.jpg" rel="nofollow noreferrer">IMAGE</a></p>
  
  <p>According to <a href="https://stackoverflow.com/questions/36902733/how-do-i-plot-multiple-rectangles-on-the-same-plot-in-d3">this</a> answer, I tried the following solution:</p>
  
  <pre><code>var svg = d3.select("body").append("svg");
  
        svg.selectAll("rect")
        .data([10,60,120])
        .enter()
        .append("g")
        .append("rect")
        .attr("width", 20)
        .attr("height", 20)
        .attr("x", 20)
        .attr("y", function(d) {return d})
        .attr("fill",  "red")
  
        .selectAll("rect")
        .data(function(d) { return d3.range(d); })
        .enter()
        .append("rect")
        .attr("width", 20)
        .attr("height", 20)
        .attr("x", 60)
        .attr("y", function(d) {return d})
        .attr("fill",  "blue");
  </code></pre>
  
  <p>Unfortunately the blue rectangles are created inside the red ones. Any idea how to achieve this?
  Here is an <a href="https://jsfiddle.net/ovqut8jx/" rel="nofollow noreferrer">EXAMPLE</a></p>