1

I have a circle packing layout of D3 within a bootstrap accordion (where all the tabs are expanded on load). I have tried to allow for a responsive layout by using the following:

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

If you collapse the tab that contains the D3 layout and expand it again, the svg's height is fine, but the container it is in does not resize correctly i.e. not enough height is provided for the entire layout to show.

Note: I used the container's width as its height as well, due to the height not being available on load. 

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

Can anyone help me to correct the height of the container / accordion when the tab is expanded again?

See the fiddle here: http://jsfiddle.net/Sim1/sLMC2/7/

sim1
  • 457
  • 1
  • 7
  • 26

1 Answers1

3

I am offering this as an alternative. Here is the FIDDLE.

Basically, I gave an initial (and hopefully reasonable) value for width and height, and then added code to re-size after that, if desired. May this will help.

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
  • 4,975
  • 2
  • 17
  • 25
  • Thanks @FernOfTheAndes, thanks for this. I tried it and it does work to fix the collapse / expand. The only thing that I'm worried about is: on initial load of the window, say it is not maximised fully, will it still display with the original w&h i.e. will it cut off what can't fit? – sim1 Apr 21 '14 at 18:18
  • I have run the code starting with different window sizes and have not encountered problems. Did you try? Bear in mind that you can trigger a windows re-size on load...see [this](http://stackoverflow.com/questions/2597152/jquery-window-resize-doesnt-work-on-load), for example. – FernOfTheAndes Apr 21 '14 at 18:29
  • Ah thanks so much! Really appreciate it! I have more than one visualization in my window but I have only applied your code to the one, so I will still check it with the others. But will mark this as the answer so long! – sim1 Apr 21 '14 at 18:35
  • And btw, excellent idea to tuck the graphs inside the accordion...such space saving can come really handy at times! – FernOfTheAndes Apr 21 '14 at 18:48
  • Thanks! Just tested this on the other visualizations and it works well!! – sim1 Apr 23 '14 at 09:50