调整窗口大小时为 Jit Graph 库调整 Canvas 大小答案

【问题标题】：Resize Canvas for Jit Graph library on window resize调整窗口大小时为 Jit Graph 库调整 Canvas 大小
【发布时间】：2012-04-23 22:37:19
【问题描述】：

情况：

我正在尝试刷新 window.resize 上的图表 (Force Directed)。

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 标记对象，我已经tried resizing。无论如何：我在纵横比方面做错了。

错误：

» 未捕获的类型错误：无法设置未定义 «
的属性“_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

问题：

我做错了什么？

【问题讨论】：

尝试将fd 放在更高的范围内。假设将window.fd = fd 放在init() 函数中，然后在window.onresize 中使用这个函数。
@Alexander 已经尝试过了，但它会空着回来。顺便说一句：fd 没有写在 Q 中——你是用户还是开发人员？ :)
我刚刚在您上面的链接中看到了其中一个示例代码。我很确定它会起作用。不管怎样，你应该创建一个jsfiddle。
@Alexander 感谢您的帮助。我有一个当地的普通香草设置而不是小提琴。无论如何：我发现了问题：/

标签： javascript graph resize window-resize thejit

【解决方案1】：

我发现了问题。

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

【讨论】：