How to make a stream graph responsive (d3.js)?

Question

I'm making a stream graph using d3.js for my company, and I'm wondering how to make it responsive. My code isn't much different from this example: http://bl.ocks.org/mbostock/4060954

enter image description here

I've been playing with setting viewBox="0 0 height width" and preserveAspectRatio = "xMinYMid meet" to no avail.

Any suggestions?

What do you mean by responsive? Could you create a jsfiddle or post the code you're working with? — THK, Nov 12 '13 at 03:31
I think she means making the SVG scale when the container is resized. — Henrik, Nov 12 '13 at 08:08
Have you seen [this question](http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3-js-visualisation-layout-responsive)? — Lars Kotthoff, Nov 12 '13 at 09:15
@THK I meant I should be able to resize the window, and the svg should scale and maintain proportions. Normally, I would work with svg in a percentage context. So, d3 is throwing me through a loop since the height and width are used in the math. I didn't make a fiddle, because it would have been redundant. Only a trivial difference between mine and that mbostock example. Notice, that example does not resize well. — Gina, Nov 12 '13 at 14:12

score 5 · Accepted Answer · edited Nov 12 '13 at 16:50

So, solution for this problem was this jsfiddle:

http://jsfiddle.net/shawnbot/BJLe6/ specifically, this code:

var chart = $("#chart"),
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");

Thanks to everyone who helped!

How to make a stream graph responsive (d3.js)?

1 Answers1