Question

我有一组D3js矩形，前面有一个异物，可以找到here的例子。在此示例中，当您单击标题（Test N）时，会显示一个div，并且框的大小会增大/减小以匹配更改。

一切正常，直到我放大或缩小。然后突然间，尺寸变得疯狂。我认为有问题的代码就是这个区域......

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);
  })
}

那么如何在将矩形重新调整到合适的高度/宽度时如何允许缩放

Answer 1

当您设置rect元素的宽度和高度时，您还没有考虑缩放比例：

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);
    })
  }
}

更新了plunker。

使用边界矩形获取d3元素的高度/宽度时，如何考虑比例

1 个答案: