CODEWITHSUNDEEP
jqueryinfovis
Ethen
Ethen

Reputation: 171

Infovis forced directed nodes names overlapping

Hi I am using Infovis(JIT) forced directed graph and i have more than 100 nodes connected to single parent node, which creates a circular shape but the name of the nodes are overlapping and it is vey difficult to read their names. Is there any way to customize it so that it should happen. Any help would be highly appreciated. FYI I have tried putting overritable: false in Label variable but it is not working

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

Some of the nodes are coming like this: enter image description here

Or else please suggest any way to randomly increase decrease the size of Edge.

Upvotes: 0

Views: 122

Answers (1)

Pratik Patel
Pratik Patel

Reputation: 1345

Its been long time since I used this library but I had a similar problem. One thing you could do is this. Manipulate lengths of edges so that adjacent edges have different lengths i.e. an edge is longer than its neighbor. This way you can avoid labels overlapping. You may be able to override rendering of edges and nodes as shown in following code.

The function for custom edge type is not doing what is described above but it can help you figure out how to override rendering. You may iterate over the edges and set flags on them which indicates length to be rendered. e.g. customLength:'short'/'long' You can then access this flag in your renderer function getFDEdgeType and change the length accordingly. Hope it helps.

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

Upvotes: 1

Related Questions