Javascript 调整d3图表的大小，使其在页面加载和调整窗口大小时为100%

这已经被问了很多次了，但似乎对我不起作用。我有，为此我添加了调整大小功能，如下所示：

 // RESIZE
      var aspect = width / height,
        chart = d3.select('svg');
      d3.select(window)
        .on("resize", function() {
          var targetWidth = chart.node().getBoundingClientRect().width;
          chart.attr("width", targetWidth);
          chart.attr("height", targetWidth / aspect);
        });

---

加载时，它不会100%填满窗口，也不会在窗口调整大小时更改。我做错了什么？

与您链接的答案中的解决方案相比，您的解决方案存在一些问题。您将从svg获得新的大小：

var targetWidth = chart.node().getBoundingClientRect().width;

与调整大小事件之前的大小相同。相反，在链接的答案中，

svg

元素位于

div

内，而

targetWidth

取自

div

。此外，我认为这种方法对于更复杂的

svg

s是无效的（现在我不知道原因，TBH）

但是，另一个选项是在调整事件大小时重新绘制图表（请参阅）：

  // RESIZE
  var aspect = width / height,
    chart = d3.select('svg');
  var container = d3.select('#container');;
  d3.select(window)
    .on("resize", function() {
      var targetWidth = container.node().getBoundingClientRect().width;
      var targetHeight = targetWidth / aspect;

                d3.select('svg').remove();

      var svg = d3.select("#container").append("svg")
        .attr("width", targetWidth + margin.left + margin.right)
        .attr("height", targetHeight + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      draw(svg, targetWidth, targetHeight);       
    });

---

此解决方案需要将绘制图表的代码封装在函数中。就计算资源而言，它可能不太合适，但可能适合您的目的。

嘿，请告诉我该解决方案是否适用于您的用例。。。