Search code examples
javascriptgraphd3.jsresponsive-designstream-graph

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?


Solution

  • 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!