Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 459
Gina Avatar asked Nov 11 '13 22:11

Gina


1 Answers

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!

like image 63
Gina Avatar answered Oct 21 '22 20:10

Gina