How do I take into account scale when getting height/width of a d3 element using bounding rectangle

Question

I have a set of D3js rectangles with a foreign object sitting in front of it, the example can be found here . In this example when you click on the header ( Test N ) a div is shown and the box around is increased/decreased in size to match the change.

Everything works fine until I zoom in or out. Then all of the sudden the sizing goes crazy. I think the code in question is this area...

function resize() {
  $scope.nodeElements.each(function(d, i) {
    console.log("Test");
    var elemental = d3.select(this);
    var rect = elemental.select("rect");
    var fo = elemental.select("foreignObject");
    var div = fo.select("div");
    var client = div[0][0].getBoundingClientRect();
    fo.attr("height", client.height)
    fo.attr("width", client.width)
    fo.attr("y", 100 * i);
    rect.attr("fill", "green")
    rect.attr("width", fo.attr("width"));
    rect.attr("height", fo.attr("height"));
    rect.attr("y", 100 * i);
  })
}

So how do I allow for zoom while still re-sizing the rectangle to the proper height/width

Answer 1

You've not taken the zoomed scale into account when you set the width and height of your rect elements:

function resize() {
    // get current scale of container
    var scale = d3.transform($scope.container.attr("transform")).scale;

    $scope.nodeElements.each(function(d, i) {
      console.log("Test");
      var elemental = d3.select(this);
      var rect = elemental.select("rect");
      var fo = elemental.select("foreignObject");
      var div = fo.select("div");
      var client = div[0][0].getBoundingClientRect();
      fo.attr("height", client.height)
      fo.attr("width", client.width)
      fo.attr("y", 100 * i);
      rect.attr("fill", "green");
      rect.attr("width", (+fo.attr("width") * 1/scale[0])); //<-- scale width by it
      rect.attr("height", (+fo.attr("height") * 1/scale[0])); //<-- scale height by it
      rect.attr("y", 100 * i);
    })
  }
}

Updated plunker .