Resize Canvas for Jit Graph library on window resize

Question

Situation:

I'm trying to refresh the graph (Force Directed) on window.resize.

jQuery( window ).on( 
        'resize', 
        function( e ) { 
                // The definition happens in the function in the next line
                // The init during $( document ).ready();
                var canvas = DefineGraphForceDirected().canvas;

                // gives me the object (sizes): 
                console.log( canvas.getSize() );

                // gives me the error: 
                canvas.resize( 500, 500 ); 
                // gives me the (also) error: 
                canvas.resize( window.innerWidth, window.innerHeight ); 
                // gives me the (also) error: 
                canvas.resize( window.innerWidth+'', window.innerHeight+'' ); 

                // Using the native html canvas, gives me wired aspect ration
                // and a repeating graph on the not resized areas 
                // when dragging the graph outside:
                var c   = document.getElementsByTagName( 'canvas' )[0],
                    ctx = c.getContext( '2d' );

                c.width  = window.innerWidth;
                c.height = window.innerHeight;
                ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
        } 
);

The canvas itself actually is a canvas mark up object and I already tried resizing. Anyway: I'm doing something wrong with the aspect ration.

The Error:

» Uncaught TypeError: Cannot set property '_depth' of undefined «

>> Backtrace: (line nr. in brackets) 

-------------------------------------------- 
e.Util.computeLevels - (jit.js:1695) 
c.each.e.(anonymous function) - (jit.js:1813) 
g.ForceDirected.q.compute - (jit.js:5934) 
$jit.ForceDirected.q.refresh - (jit.js:6047) 
$jit.Canvas.q.initialize.canvases.push.l.Base.(anonymous 
function).resize - (jit.js:1089) 
l.Base.2D.q.resize - (jit.js:1226) 
$jit.Canvas.q.resize

Question:

What am I doing wrong?

Try putting `fd` in a higher scope. Let's say put `window.fd = fd` at the of the `init()` function an use this one in your `window.onresize`. — Alexander, Apr 11 '12 at 16:05
@Alexander Already tried that, but it'd come empty back. Btw: As `fd` wasn't written in the Q - are you a user or maybe even the dev? :) — kaiser, Apr 13 '12 at 10:51
I just saw one of the example codes in the link you put above. I'm pretty sure it would work. Anyways, you should create a [jsfiddle](http://jsfiddle.com). — Alexander, Apr 13 '12 at 11:40
@Alexander Thanks for your help. I had a local plain vanilla setup instead of the Fiddle. Anyway: I found the problem :/ — kaiser, Apr 13 '12 at 11:53

kaiser · Accepted Answer · 2014-05-09T15:08:18.233

I found the problem.

With the infoViz/TheJit graph, you'll have to use the width and height attributes. Else you won't be able to resize the canvas... it isn't in use in the examples...

function loadGraph() {
    var GraphForceDirected = new $jit.ForceDirected( {
        // Size
        height : 500,
        width  : 200,
    }

    return GraphForceDirected;
}

Then trigger it during (jquery mobile) pageshow:

jQuery( '#graph-container' ).on(
    'pageshow', 
    function( $ ) {
        var GraphForceDirected = DefineGraphForceDirected();

        // Load JSON data for the ForceDirected Graph
        GraphForceDirected.loadJSON( json );
        // compute positions incrementally and animate.
        GraphForceDirected.computeIncremental( {
            iter       : 40,
            property   : 'end',
            onStep     : function( percent ) {
                // Example status update fn
                Status.write( percent );
            },
            onComplete : function() {
                // Example status update fn
                Status.write( 100 );

                GraphForceDirected.animate( {
                    modes      : ['linear'],
                    transition : $jit.Trans.Elastic.easeOut,
                    duration   : 2500
                } );

                // Here it works:
                GraphForceDirected.canvas.resize(
                    window.innerWidth,
                    window.innerHeight,
                    true
                );
            }
        } );
    } 
);

Resize Canvas for Jit Graph library on window resize

Situation:

The Error:

Question:

1 Answers1