5

Javascript InfoVis SpaceTree を使用しています。次のようなツリーがあります。

ここに画像の説明を入力

ただし、「NOW」ノードを選択して、ルート ノードに戻るパスを強調表示するが、このノードが中央に配置されないようにする必要があります。すなわち:

ここに画像の説明を入力

試しsetPos()ましたが、これはうまくいきません。

何か案は？

ソースの完全に機能する自己完結型のコピーを含む github リポジトリを次に示します (残念ながら、最初にこの質問をしたときから、私の Web サイトはなくなりました)。

https://github.com/kevinkenny/so4418163

この例では、ファイルex2.htmlには最初の画像を生成するマークアップがex3.html含まれており、下の画像をレンダリングするマークアップが含まれています。

4

2 に答える 2

9

ああ、それはグラフライブラリを再び台無しにしました:D

onCompleteその選択関数、特にコールバック をもう一度見てみましょう。

onComplete: function(){ // what a mess!
    group.hide(group.prepare(getNodesToHide.call(that)), complete); // hide the nodes???
    geom.setRightLevelToShow(node, canvas); // guess what this already moves stuff around!
    that.compute("current"); // recomputes the graphs position
    that.graph.eachNode(function(n) { // sets up the moved node positions
        var pos = n.pos.getc(true);
        n.startPos.setc(pos.x, pos.y);
        n.endPos.setc(pos.x, pos.y);
        n.visited = false; 
    });

    // hey look! We don't use a global translation offset! So we need to translate the HTML stuff extra
    var offset = { x: complete.offsetX, y: complete.offsetY };
    that.geom.translate(node.endPos.add(offset).$scale(-1), ["start", "current", "end"]);

    // show the nodes again?
    group.show(getNodesToShow.call(that));              

    // the first useful call in here, redraw the updated graph!
    that.plot();
    complete.onAfterCompute(that.clickedNode); // callback better leave them here
    complete.onComplete();
}

したがって、再配置はまったく必要ないため、リファクタリング (一部の行の削除とも呼ばれます) できます。 

onComplete: function(){             
    that.plot();
    complete.onAfterCompute(that.clickedNode);
    complete.onComplete();
}

ほら見て！大量のバイトを節約しました!!! 残りは、グラフにとって重要なことは何もしません。

もちろん、機能を取り除くだけで、いつかは苦しむかもしれないので、次のようにcenterパラメーターを追加する必要がありselectます。 

select: function(id, center, onComplete) {

....

onComplete: function(){
    if (center) {
        group.hide(group.prepare(getNodesToHide.call(that)), complete);
        geom.setRightLevelToShow(node, canvas);
        that.compute("current");
        that.graph.eachNode(function(n) { 
            var pos = n.pos.getc(true);
            n.startPos.setc(pos.x, pos.y);
            n.endPos.setc(pos.x, pos.y);
            n.visited = false; 
        });
        var offset = { x: complete.offsetX, y: complete.offsetY };
        that.geom.translate(node.endPos.add(offset).$scale(-1), ["start", "current", "end"]);
    }
    group.show(getNodesToShow.call(that));              
    that.plot();
    complete.onAfterCompute(that.clickedNode);
    complete.onComplete();
}
于 2010-12-11T18:18:23.887 に答える
1

offSetX と offSetY の位置を次のように設定します。

var st = new $jit.ST({
    'injectInto': 'infovis',
    //set duration for the animation
    duration: 800,
    //set animation transition type
    transition: $jit.Trans.Quart.easeInOut,
    //set distance between node and its children
    levelDistance: 50,
    //set max levels to show. Useful when used with
    //the request method for requesting trees of specific depth
    levelsToShow: 4,
    orientation: 'top',
    align: 'center',
    //set node and edge styles
    //set overridable=true for styling individual
    //nodes or edges 
    offsetX: 0, offsetY: 110,
    Node: {
        height: 30,
        width: 31,
        //use a custom
        //node rendering function
        type: 'nodeline',
        color: '#f76b14',
        lineWidth: 1,
        align: "center",
        overridable: true
    },

infovis div、つまり、spacetree を保持する div は、時々グラフ全体を表示しません。onComplete イベントに次のコードを追加すると、うまくいきます。

これにより、グラフ全体に対応するように div の高さが設定されます。向きを「上」として使用しています。

onComplete: function () {
        var LastnodeTop = 0;
        $("div.node").each(function () {
            var pos = $(this).position();
            if (pos.top > LastnodeTop)
                LastnodeTop = pos.top;
        });
        var LastnodeTopStr = LastnodeTop.toString();
        LastnodeTopStr = LastnodeTopStr.substring(0, 4);
        var LastnodeTopInt = parseInt(LastnodeTopStr) + 100;            
        $("#infovis").attr("style", "height:" + LastnodeTopInt + "px");
    }

ありがとう。

于 2012-01-09T09:33:21.410 に答える