Javascript 用D3图分析Bootstrap手风琴展开高度的奇异行为

我有一个D3的圆形包装布局，在一个引导式手风琴中（所有标签都在加载时展开）。我已尝试使用以下方法实现响应性布局：

var vis = d3.select("#Vis_container").insert("svg:svg", "h2")
    .attr("width", '100%')
    .attr("height", '100%')
    .attr('viewBox', '0 0 ' + w + ' ' + h)
    .attr('preserveAspectRatio', 'xMinYMin')
    .append("svg:g")
    .attr("transform", "translate(" + 0 + "," + 0 + ")");

如果折叠包含D3布局的选项卡并再次展开，则svg的高度可以，但它所在的容器没有正确调整大小，即没有提供足够的高度来显示整个布局

注意：由于装载时高度不可用，所以我也使用了容器的宽度作为其高度

var w = $('#Vis_container').width(),
    h = $('#Vis_container').width()

当标签再次展开时，有人能帮我纠正容器/手风琴的高度吗

---

请看这里的提琴：

我提供这个作为替代。这是你的电话号码

基本上，我为宽度和高度给出了一个初始值（希望是合理的），然后添加代码，如果需要的话，在这之后重新调整大小。希望这会有帮助

var vis = d3.select("#Vis_container")
  .insert("svg:svg", "h2")
    .attr("width", h)
    .attr("height", w)
    ...

var chart = $("#Vis_container>svg"),
    aspect = chart.width() / chart.height(),
    container = chart.parent();

$(window).on("resize", function() {
    var targetWidth = container.width();
    chart.attr("width", targetWidth);
    chart.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize");

---

谢谢@FernOfTheAndes，谢谢你。我试过了，它确实能修复塌陷/扩展。我唯一担心的是：在窗口的初始加载时，如果它没有完全最大化，它是否仍会与原始的w&h一起显示，即它是否会切断不适合的内容？我已经从不同的窗口大小开始运行代码，并且没有遇到问题。你试过了吗？请记住，您可以在加载时触发windows重新调整大小…例如，请参阅。啊，非常感谢！真的很感激！我的窗口中有多个可视化，但我只将您的代码应用于其中一个，因此我仍将与其他人一起检查它。但我会把这个标记为答案的！顺便说一句，把图表塞进手风琴里是个好主意……这样节省空间有时真的很方便！谢谢刚刚在其他可视化系统上测试过，效果很好！！