调整窗口大小时调整 Jit 图形库的画布大小

Resize Canvas for Jit Graph library on window resize

本文关键字：调整布大小图形库 Jit 窗口小时更新时间：2023-09-26

>情况：

我正在尝试刷新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

问题：

我做错了什么？

我发现了问题。

使用

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