Hi there,
I recently came up with a new feature request idea: to provide responsiveness to the graphs. I have in mind the force directed feature of d3 module (plus graphapi), and I wish to have the graph size set to fit screen.
What do you think?
thanks

Comments

asherry’s picture

asherry commented

It's a great idea. Do you have any current working examples out there? This is mostly on the js side.

miromarchi’s picture

miromarchi commented

No working example. And also at the moment, my programming skills are low and I don't know how to work on it, also I lack of time. I moved this to a future sprint. I'm working on http://www.retebuonvivere.org/rete (rete means network in italian). So, I opened this issue only to share the simple idea of a fit screen

space. At the moment I only tried to set width to 100% in d3 graph view - graph rendering - settings, but this results in a crushed svg space. On the contrary, if I set the settings to a normal width: e.g. 800, and then, using the browser Inspect-element function, I change it to 100%, it works exactly the way I expect: fit to width of parent div.
miromarchi’s picture

miromarchi commented

I ended up with a more responsive layout. As you said this is on the js side. I paste the lines in our d3.network library (which btw anyone can get at https://github.com/miromarchi/rbv_network:

Drupal.d3.network = function (select, settings) {
    var network_width = $("#graphapi-default").width(); // here we take the width of the cointainer div by id with jQuery
    var network_height;
    if ($("#graphapi-default").width() > 360)
        network_height = Math.max($(window).height()*0.65,320); // here, if window height is more than 360px we set network height to 65% of window, but no less than 320px.
    else
        network_height = settings.config.height; // otherwise stay with settings

This is not completely responsive, because if you resize the window the layout doens't follow. But when the page loads it fits always the container as I wanted. It's something!

karolus’s picture

karolus commented

There is also another way to make a chart scale for responsive/fluid areas.

1. Add this code to your JS for the chart, within the variable defining the SVG d3.select:

.classed("svg-container", true)
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("viewBox", "0 0 400 400")
    .classed("svg-content-responsive", true)

Here, viewBox is set to 400 x 400px as default, but will scale to any size.

2. Add this to your CSS (may need to make some adjustments per your specific usage):

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%; /* Added Setting-fixes bottom spacing */
    /*padding-bottom: 100%; /* aspect ratio-but may break layout */
    vertical-align: top;
    overflow: hidden;
}

.svg-content-responsive {
    display: inline-block;
    /*position: absolute;*/ /* May break layout */
    top: 10px;
    left: 0;
}

As you can see, some settings are commented out, but may work better in your situation.

And, as a caveat, the graph scales, but preserves aspect ratio, as a flat SVG image would. I don't know of any way to make a D3 chart fluid.