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

您的黄色矩形和文字不包含在应用缩放的元素中。简单的解决方法是将它们附加到gMain（这是应用缩放的元素）：

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

更新了小提琴here。