javascript - Javascript InfoVis Spacetree 個々のノードのスタイリング

Question

私は JavaScript コーディングの初心者です。InfoVis Spacetree について誰か助けてもらえますか? ノードの特定のレベルの幅と高さを残りよりも小さく設定しようとしています。データに入れたようです{}が、試しdata:{"$height":"30"}てみるとツリー全体が台無しになりました...

Answer 1

私がやっている方法は、これらの特別なノードのデータ配列にいくつかの情報を入れ、それを描画するときに、これらのノードでのみ変更を行うことです。

データ：

var json = 
{
    'id':'id0.0',  
    'name':'Root',  
    'data':
    {
        'mytype':'1'
    }, 

    'children':
    [
        {
            'id':'id1.0',  
            'name':'Node 1.0', 
            'data':
            {
                'mytype':'2'
            }, 

            'children':
            [
                {
                    'id':'id2.0',  
                    'name':'Node 2.0'
                }, 

                {
                    'id':'id2.1',  
                    'name':'Node 2.1'
                }, 

                {
                    'id':'id2.2',  
                    'name':'Node 2.2'
                }
            ]
        }
    ]
};

したがって、一部のノードにmytypeという名前のデータ要素があることがわかります。ツリーが描画されるときにこれらに注意する必要があります。そのためには、 onBeforePlotNode関数を実装する必要があります。このメソッドは、プロットする直前にノード スタイルを変更する場合に便利です。

特別なノードを処理する SpaceTree Creation のコードは次のとおりです。

myTree = new $jit.ST({
    //id of viz container element
    injectInto: 'MyGraph',
    orientation: 'top',
    duration: 200,
    transition: $jit.Trans.Quart.easeInOut,
    levelDistance: 50,


    //enable panning
    Navigation: 
    {
      enable:true,
      panning:true,
      zooming:20
    },


    //set node and edge styles
    //set overridable=true for styling individual
    //nodes or edges
    Node: {
        overridable: true,  
        autoWidth: true,  
        autoHeight: true,  
        type: 'rectangle'  
    },

    Edge: {
        type: 'bezier',
        overridable: true
    },


    onBeforePlotNode: function(node)
    {
        //if(node.data.class == 'node') 
        if(node.data.mytype == '2') 
        {
            node.data.$height = 60;                    
        }
    },
});

OnBeforePlotNode がノードのデータを見て、それが特別なものかどうかを確認していることがわかります。その後、これらのノードのみを変更できます。

Answer 2

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

ありがとう。