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?

Answer 1

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
                );
            }
        } );
    } 
);