Question

我在一个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()

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

请参阅此处的小提琴：http://jsfiddle.net/Sim1/sLMC2/7/

Answer 1

我提供此作为替代方案。这是FIDDLE。

基本上，我给出了宽度和高度的初始值（并且希望合理），然后在需要时添加代码以重新调整大小。愿这有用。

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");

Bootstrap手风琴的奇怪行为用D3图扩展高度

1 个答案: