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.