0

こんにちは、Infovis(JIT) 強制有向グラフを使用しています。単一の親ノードに 100 を超えるノードが接続されています。これにより、円形が作成されますが、ノードの名前が重複していて、名前を読むのが非常に困難です。それが起こるようにカスタマイズする方法はありますか？どんな助けでも大歓迎です。overritable: false参考までに、ラベル変数を入れてみましたが、機能していません

Label: {
      type: labelType, //Native or HTML
      size: 10,
      style: 'normal'
    },

一部のノードは次のようになります。ここに画像の説明を入力

または、ランダムに Edge のサイズを小さくする方法を提案してください。

4

1 に答える 1

1

このライブラリを使用してから長い時間が経ちましたが、同様の問題がありました。あなたができることの1つはこれです。エッジの長さを操作して、隣接するエッジの長さが異なるようにします。つまり、エッジが隣接するエッジよりも長くなります。このようにして、ラベルの重複を避けることができます。次のコードに示すように、エッジとノードのレンダリングをオーバーライドできる場合があります。

カスタム エッジ タイプの関数は上記のことを行っていませんが、レンダリングをオーバーライドする方法を理解するのに役立ちます。エッジを繰り返し処理し、レンダリングする長さを示すフラグを設定できます。たとえばcustomLength:'short'/'long' 、レンダラー関数でこのフラグにアクセスし、getFDEdgeTypeそれに応じて長さを変更できます。それが役に立てば幸い。

,initFD: function() {
        // other stuff..... like lableType etc.

        // define your own edge type
        $jit.ForceDirected.Plot.EdgeTypes.implement({
            'label-arrow-line': this.getFDEdgeType()
        });
}


,getFDEdgeType: function() {
        return {
            'render':function(adj, canvas) {
                // get nodes cartesian coordinates
                var pos = adj.nodeFrom.pos.getc(true);
                var posChild = adj.nodeTo.pos.getc(true);
                // plot arrow edge
                this.edgeHelper.line.render( { x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, canvas );    
                // check for edge label in data
                if( adj.getData('labelid') && adj.getData('labeltext') ) {
                    // now adjust the label placement
                    var radius = this.viz.canvas.getSize(); 
                    var x = parseInt((pos.x + posChild.x - ( adj.getData('labeltext').length * 1)) / 2); 
                    var y = parseInt((pos.y + posChild.y ) /2);
                    if( adj.getData('showLabel') == 'true' ) 
                        this.viz.canvas.getCtx().fillText(adj.getData('labeltext'), x, y); 
                    else this.viz.canvas.getCtx().fillText('', x, y); // do not show label is showLabel is false
                }
            },
            'contains': function(adj,pos){ 
                var posFrom = adj.nodeFrom.pos.getc(true);
                var posTo = adj.nodeTo.pos.getc(true);
                return this.edgeHelper.line.contains({ x: posFrom.x, y: posFrom.y }, { x: posTo.x, y: posTo.y }, { x: pos.x, y: pos.y }, adj.Config.dim);
            }                       
        }; 
    }
于 2015-06-25T05:59:37.650 に答える