2

情况：

我正在尝试刷新图表（Force Directed）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 );
        } 
);

画布本身实际上是一个canvas标记对象，我已经尝试过调整大小。无论如何：我在纵横比方面做错了。

错误：

» 未捕获的类型错误：无法设置未定义的属性“_depth” «

>> 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

问题：

我究竟做错了什么？

4

1 回答 1

3

我发现了问题。

使用 infoViz/TheJit 图表，您必须使用width和height属性。否则你将无法调整画布的大小......示例中没有使用它......

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

    return GraphForceDirected;
}

然后在 (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
                );
            }
        } );
    } 
);
于 2012-04-13T11:52:59.330 回答