Javascript 使用D3pie的响应图表

我使用D3pie，所以我可以根据D3库制作一些饼图。我试图使6个不同的饼图适合一个容器。我将容器分成两行（我使用引导），每行有3个div

我找不到一种方法使我使用的饼图适合屏幕，并对窗口大小做出响应。下面是代码的粗略表示，仅用一个图表示例。目标是饼图将根据窗口大小调整自身大小，并使用引导重新组织自身

HTML

<div class=".chart-map">
<div class="container-fluid">
 <div class="row">
  <div id="chart1" class="col-xs-6 col-md-4"></div>
  <div id="chart2" class="col-xs-6 col-md-4"></div>
  <div id="chart3" class="col-xs-6 col-md-4"></div>
 </div>
 <div class="row">
  <div id="chart4" class="col-xs-6 col-md-4"></div>
  <div id="chart5" class="col-xs-6 col-md-4"></div>
  <div id="chart6" class="col-xs-6 col-md-4"></div>
 </div>
</div>
</div>

CSS

var dataset = {
"header":{
  "title":{
     "text":"Test Data",
     "fontSize":10
  }
},
"data":{
  "content":[
     {
        "label":"Male",
        "value":44
     },
     {
        "label":"Female",
        "value":24
     },
     {
        "label":"Undefined",
        "value":30
     }
  ]
},
"size":{
  "canvasHeight":$('#chart1').outerHeight(),
  "canvasWidth":$('#chart1').outerWidth()
},
"labels":{
  "outer":{
     "pieDistance":10
  }
 }
};

var pie = new d3pie("chart1", dataset);

.chart-map{
  width: 600px;
  height: 300px;
}

---

您可以将

preverserveaspectratio

和

viewBox

属性设置为父svg，如下所示

---

它不响应垂直高度的变化。它只响应宽度的变化。你找到解决方案了吗？

<svg id="svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 400 400" >

#svg{
max-width:400px;
}