D3 version 4 zoom behavior over g

Question

The included fiddle shows that when zoomed in, the blue rectangles scale as expected, but the yellow rectangles do not! The main difference is that the yellow rectangles were added to the 'g' element with the included text. 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 are not contained in the element to which scaling applies. A simple fix is ​​to add them to gMain(which is the element on which scaling is applied):

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

Updated fiddle here .