d3 version 4 zoom behaviour on g element

Question

The attached fiddle shows that on zoom the blue rectangles resize with the scale as expected but the yellow rectangles don't! The main difference is that the yellow rectangles were added to a 'g' element with text included. Any ideas why?

https://jsfiddle.net/sjp700/u6rj20jc/1/

var group = svg.selectAll(".rectangle")
          .data(data);

    gEnter = group.enter()
    .append("g")
    .attr("class", "rectangle")
    .attr("fill", "yellow")
    .attr("transform", function (d) { return "translate(" + x(d.start) + "," + y(d.finish) + ")"; });


    gEnter.append("rect")
       .attr("class", "rectband")
       .merge(gEnter)
       .attr("width", 50)
        .attr("height", 18)
        //.attr("rx", 10)
        //.attr("ry", 10)
        .style("opacity", .5) // set the element opacity
        .style("stroke", "black");

Answer 1

Your yellow rectangles and text is not contained in an element that the zoom is applied to. Simple fix is to append them to gMain (which is the element on which the zoom is applied):

var group = gMain
  .selectAll(".rectangle")
  .data(data);

Updated fiddle here.