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

HTML5 Audio doesn't Autoplay for Chrome on Android

Updating Razor 2.0 to 3.0 with Asp.net MVC

Ng-repeat: Order a List Vertically rather Horizontal