Question

我有一个plunker，我试图让我的SVG 100％的屏幕宽度和高度。

link: function($scope, element, attrs) {
  var firstElement = element[0];

  function updateSize() {
    $scope.height = firstElement.clientHeight;
    $scope.width = firstElement.clientWidth;
    $scope.svg.attr("height", $scope.height)
      .attr("width", $scope.width);
    $scope.render();
  }
  window.onresize = function(event){
    updateSize();
  }
  var report = d3.select(firstElement);
  $scope.svg = report.append("svg");
  updateSize();
}

它似乎总是关闭（正面或负面）17px。有人能看到我错过的东西吗？

Answer 1

您可以通过将svg的尺寸设置为＆＃34; 100％＆＃34;来更轻松地实现调整大小。

这样你就不需要监听窗口调整大小，svg会自动缩放。

  $scope.svg = report.append("svg");
  $scope.svg.attr("height", '100%')
    .attr("width", '100%')

demo on plnkr

如果您想以某种方式扩展svg的内容，则可以向svg添加viewBox attribute。我建议阅读this guide，对于使用d3的响应式SVG非常聪明。

P.S。我没有验证，但你的偏移问题可能是由窗口调整大小事件监听器引起的。＆＃34;反跳＆＃34;然后它可能已经解决了这个问题。

为什么我的D3 SVG没有从Angular元素获得正确的宽度/高度

1 个答案: