Question

我想将此条形图缩放到其容器的大小。理想情况下做w ='100％'，h ='100％'。我可以这样做吗？

SiebelMessage

Answer 1

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

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

最后一个参数（10）表示你想使用十进制系统（如果我没有记错的话）。

因此，您可以将svg元素的宽度设置为该宽度。我甚至建议你用它来创建一个函数并在resize事件上调用该函数，所以你的svg看起来像一个流畅的/响应元素。

你可以这样做：

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

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

Answer 2

尝试将div的高度和宽度更改为其列高和宽度，如http://jsfiddle.net/elviz/mo363jm7/2/

  <div class="test" style="height:100px;width:200px;overflow:hidden"></div>

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

2 个答案: