D3.js 使SVG容器达到D3 v4中父容器的100%宽度和高度（而不是像素）

我有一个父容器（div.barChartContainer），其高度和宽度是从视口计算的，例如：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 + ")");

---

检查svg是否使用父级高度和宽度绘制

参考：

var parentDiv=document.getElementById（“parentDiv”）；
var svg=d3.select（parentDiv.append（“svg”）；
函数重画（显示）{
//提取CSS计算的宽度和高度。
var width=parentDiv.clientWidth；
变量高度=parentDiv.clientHeight；
//使用提取的大小设置SVG元素的大小。
svg
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
如果（显示===false）{
style（'visibility'，'hidden'）；
}否则{
style（'visibility'，'visible'）；
}
attr（“样式”，“轮廓：细实心红色；”）
.附加（“圆圈”）
.attr（“cx”，30）
.attr（“cy”，30）
.attr（“r”，20）；
}
//第一次绘制以初始化。
重画（假）；
//过一会儿再画
设置超时（重绘，1000）
#parentDiv{
高度：计算（100vh-100px）；/**输出容器对于显示来说很小*/
宽度：计算（100vw-100px）；
显示：块；
边框：1px纯红；
}
解决方案是注释掉/删除宽度和高度属性值，而是添加以下两行：

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

这有用吗@是的，谢谢你！只是一个警告<代码>视图框

属性区分大小写！请注意，它应该是

camelCase

。使用属性

viewbox

将不起作用。还有其他类似的问题/答案：这不是一个好策略，因为您将不断运行重画功能！监听容器大小调整事件，然后运行重画函数更明智