Make d3js Responsive

    This is probably the most popular quesition I see and is somewhat my main concern as far as things go with one of my projects. Now this isn't a perfect solution but its doesn't depend on jquery or anything else. So it keeps things in the d3js scope which is really what I want since I don't always include jquery in all of my projects.

function resize() {
        //Top Nav has a bottom padding for 50px's
        width = window.innerWidth, height = window.innerHeight;
        svg.attr("width", width).attr("height", height);
        force.size([width, height]).resume();
    }
    window.addEventListener('resize', resize());

var svg = d3.select("body").append("svg")
      //.attr("viewBox", "0 0 " + width + " " + height)
      //.attr("preserveAspectRatio", "xMidYMid meet");
Secret project I'm working on...

     I didn't include the comments in my project but I think others might and I feel they are very helpful if you are trying to make a true responsive web app.  Later I will include them in my project but the aspect ratio is way off right now. So for the time being its just making things a little more difficult to figure out at the moment. Instead I'm focus on that overall experience but I would recommend figuing out the ratio for your app. 

Popular posts from this blog

Ng-repeat: Order a List Vertically rather Horizontal

HTML5 Audio doesn't Autoplay for Chrome on Android

Updating Razor 2.0 to 3.0 with Asp.net MVC