Javascript 将D3条形图缩放到容器大小

我想把这个条形图缩放到它的容器大小。理想情况下，做一些像w='100%'，h='100%'这样的事情。我可以这样做吗

//宽度和高度
var w=200，
h=100，
barPadding=1，
数据集=[5,10,13,19,21,25,22,18,15,13，
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
//创建SVG元素
var svg=d3.选择（“.test”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
svg.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{
返回i*（带数据集长度）；
})
.attr（“y”，函数（d）{
返回h-（d*4）；
})
.attr（“宽度”，w/dataset.length-条形填充）
.attr（“高度”，功能（d）{
返回d*4；
})
.attr（“填充”，功能（d）{
返回“rgb（0，0，+（d*10）+”）；
});

尝试将div的高度和宽度更改为其列高度和宽度，如下所示

---

您可以使用样式功能询问容器（或任何给定元素）的宽度，如下所示：

   var width = parseInt(d3.select(".test").style("width"),10);
   var height =  parseInt(d3.select(".test").style("height"),10);

最后一个参数（10）表示要使用十进制（如果我没有弄错的话）

因此，您可以将svg元素的宽度设置为该宽度。我甚至建议您从中创建一个函数，并在调整大小事件中调用该函数，这样您的svg看起来就像一个流体/响应元素

您可以按以下方式执行此操作：

d3.select(window).on('resize', function(){/* your svg and chart code */});

---

编辑：在重读你的问题时，我觉得我可能误解了你的问题。D3具有缩放功能，可以缩放数据，使其适合svg容器。如果div元素没有响应，那么您应该将svg的宽度和高度设置为与div元素相同，并在数据上使用比例，以便图表适合svg容器。您可以在此处找到有关缩放的更多信息：

我想自动缩放到容器。手动设置是不合理的。

   var width = parseInt(d3.select(".test").style("width"),10);
   var height =  parseInt(d3.select(".test").style("height"),10);

d3.select(window).on('resize', function(){/* your svg and chart code */});