时间戳

首页 > 解决方案 > 调整我的 d3 图表的大小，使其在页面加载和调整窗口大小时为 100%

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% 填满窗口，当窗口调整大小时它也不会改变。我究竟做错了什么？

标签： javascriptd3.js

解决方案

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

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

它的大小与调整大小事件之前的大小相同。相反，在链接的答案中，svg元素位于 a 内div，而 thetargetWidth取自div. 此外，我认为这种方法对于更复杂的 s 无效svg（现在我不知道原因，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);       
    });

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

推荐阅读