无法根据视口宽度动态调整div元素的大小

Question

我正在尝试制作响应式设计，并且在此设计中我有一个d3.js条形图。条形图的宽度对应于视口的宽度。如果条形为1/5，则为视口宽度的20％，依此类推。我正在尝试动态调整它们的大小，但是代码的行为与我想要获得的非常不同。由于所有的div都是不同的宽度，我想我会用类条形图遍历每个div，并通过将新视口/旧视口的比率乘以其旧宽度来给它一个新的宽度

这是我的代码：

var docFifth = ($(".row").width())/5;
var fullWidth = docFifth*5; //this is the full width of the viewport
$(window).resize(function(){
   var newSize = $(".row").width();
   var percentage = (newSize / fullWidth).toFixed(2);
   $(".bar-class").each(function(){
     $(this).width($(this).width() * percentage);
   })
});

这里有什么问题？它几乎似乎最初工作，但随后指数变得太小。提前谢谢。