d3バージョン4のg要素のズーム動作

Question

添付されているフィドルでは、拡大表示すると、青い四角形がスケールに合わせてサイズ変更されますが、黄色の四角形は表示されません。主な違いは、テキストが含まれた 'g'要素に黄色の長方形が追加された点です。なぜどんなアイデア？

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

あなたの黄色の長方形とテキストはズームが適用されていることを要素に含まれていません。

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

更新フィドルhere：簡単な修正は（ズームが適用される元素である）gMainにそれらを追加することです。