Javascript D3在调整窗口大小时更改SVG尺寸

我有一个项目，我正在使用D3JS创建一些图表。我试图使这些图表在窗口大小改变时响应。为此，我已经使用viewbox定义了svg：

var svg = d3
      .select(this.$refs["chart"])
      .classed("svg-container", true)
      .append("svg")
      .attr("class", "chart")
      .attr(
        "viewBox",
        `0 0 ${width + margin.left + margin.right} ${height +
          margin.top +
          margin.bottom}`
      )
      .attr("preserveAspectRatio", "xMinYMin meet")
      .classed("svg-content-responsive", true)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

我还使用将宽度和高度设置为SVG所在的div的宽度和高度。因此，此图表使用与其内部div相同的大小：

 width = this.$refs["chart"].clientWidth - margin.left - margin.right,
 height = this.$refs["chart"].clientHeight - margin.top - margin.bottom;

此div的宽度和高度设置为其父div的100%。因此，当我调整窗口大小时，svg所在的div可以更改大小和纵横比。 这就是加载页面时图表最初的外观。因此，它从它所在的div中获取其高度和宽度：

但是当我调整图表的大小时，它会缩小到仍然适合父div的新宽度。但是高度会随之改变。所以我假设纵横比保持不变：

我尝试在窗口调整大小时更新svg视口。但是当我在Chrome中的开发者工具的DOM中检查SVG元素时，vieuwport没有被更新。我添加了控制台日志，以检查父级的宽度和高度是否也发生了变化，并且它们似乎也发生了变化。但更新后的视口不会应用于svg：

d3.select(window).on("resize", () => {
      svg.attr(
        "viewBox",
        `0 0 ${this.$refs["chart"].clientWidth} ${this.$refs["chart"].clientHeight}`
      );
    });

.区域{
填充：url（#面积梯度）；
笔划宽度：0px；
}
身体{
宽度：100%；
身高：100%；
}
.app{
宽度：100%；
身高：100%；
}
#页面{
宽度：100%；
身高：100%；
}
.my_dataviz{
宽度：100%；
身高：100%；
}
新Vue({
el:“#应用程序”，
数据：{
类型：数组，
要求：正确，
},
安装的（）{
常数minScale=0，
最大标度=35；
风险值数据=[{
键：“一”，
价值：33，
},
{
关键：“两个”，
数值：30，
},
{
键：“三”，
价值：37，
},
{
键：“四”，
价值：28，
},
{
键：“五”，
价值：25，
},
{
键：“六”，
价值：15，
},
];
console.log（此.$refs[“图表”].clientHeight）
//设置图形的尺寸和边距
var保证金={
前20名，
右:0,，
底数：30，
左：40
},
宽度=
此.$refs[“图表”].clientWidth-margin.left-margin.right，
高度=
此.$refs[“图表”].clientHeight-margin.top-margin.bottom；
//设定范围
var x=d3.scaleBand（）.range（[0，width]）。padding（0.3）；
变量y=d3.scaleLinear（）.range（[height，0]）；
//将svg对象附加到页面主体
//将“组”元素附加到“svg”
//将“组”元素移动到左上角
var svg=d3
.选择（此.$refs['chart']）
.classed（'svg-container'，true）
.append（'svg'）
.attr（'类'，'图表'）
艾特先生(
“查看框”，
`0${width+margin.left+margin.right}${
高度+边距.顶部+边距.底部
}`
)
.attr（'preserveAspectRatio'，'xMinYMin-meet'）
.classed（'svg-content-responsive'，true）
.append（'g'）
艾特先生(
“转换”，
'翻译（'+margin.left+'，'+margin.top+'）'
);
//格式化数据
data.forEach（函数（d）{
d、 值=+d.值；
});
//缩放域中数据的范围
x、 领域(
数据映射（函数（d）{
返回d.key；
})
);
y、 域（[minScale，maxScale]）；
//添加水平线
设四分之一=（最大刻度-最小刻度）/4；
svg
.append（'svg:line'）
.attr（'x1'，0）
.attr（'x2'，宽度）
.attr（'y1'，y（四分之一））
.attr（'y2'，y（四分之一））
.风格（“笔画”、“灰色”）；
svg
.append（'svg:line'）
.attr（'x1'，0）
.attr（'x2'，宽度）
.attr（'y1'，y（四分之一*2））
.attr（'y2'，y（四分之一*2））
.风格（“笔画”、“灰色”）；
svg
.append（'svg:line'）
.attr（'x1'，0）
.attr（'x2'，宽度）
.attr（'y1'，y（四分之一*3））
.attr（'y2'，y（四分之一*3））
.风格（“笔画”、“灰色”）；
//防御工具提示div
让工具提示=d3
.选择（'正文'）
.append（'div'））
.attr（'类'，'工具提示'）
.style（'位置'，'绝对'）
.style（'top'，0）
.style（'left'，0）
.style（'opacity'，0）；
//为条形图添加矩形
svg
.selectAll（“.bar”）
.数据（数据）
.输入（）
.append（'rect'）
.attr（'class'，'bar'）
.attr（'x'，函数（d）{
返回x（d键）；
})
.attr（'width'，x.bandwidth（））
.attr（'y'，函数（d）{
返回y（d值）；
})
.attr（高度），功能（d）{
控制台日志（高度，y（d值））
返回高度-y（d值）；
})
.attr（'fill'，'#206BF3'）
.attr（'rx'，5）
.attr（'ry'，5）
.on（'mouseover'，（e，i）=>{
d3.选择（e.currentTarget）.style（'fill'，'white'）；
tooltip.transition（）.duration（500）.style（'opacity'，0.9）；
工具提示
.html(
`${i.key}${
今年
} ${converter.addPointsToEveryThousand(
i、 价值观
)}千瓦时`
)
.style（'left'，e.pageX+'px'）
.style（'top'，e.pageY-28+'px'）；
})
.on（'mouseout'，（e）=>{