在D3 v4中制作SVG容器100%宽度和父容器的高度(而不是像素)

Question

我有一个父容器(div.barChartContainer),其高度和宽度是从视口计算的,ex:width:calc(100vh - 200px).SVG容器附加到div.barChartContainer元素.

我正在努力解决如何让SVG元素成为其父元素的100%宽度和高度,希望我能得到一些帮助.现在我有静态像素数量(当前它正确呈现,但没有响应).

谢谢!

  var margin = {top: 20, right: 20, bottom: 30, left: 80},
          width = 960 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;          
          // set the ranges
          var y = d3.scaleBand()
          .range([height, 0])
          .padding(0.4);
          var x = d3.scaleLinear()
          .range([0, width]);          
          var svg = d3.select(".barChartContainer").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

Answer 1

解决方案是注释掉/删除width和height属性值,而是添加以下两行:

//- .attr("width", width + margin.left + margin.right)
//- .attr("height", height + margin.top + margin.bottom)
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 960 500")