如何为arbor js中的每个节点文本添加换行符

Question

I have a network,with 14 nodes, and each node has a label, and also edges for connecting these nodes to each other. I tried to enter a long label for one of these nodes, and unfortunatly it seems that arborjs show labels on nodes just horizontally, so I tried to put a new line character in a label text "\\n" and it will render it as an space, so I was wondering if anybody knows how to have multiple line label for a node in arbor js? Here is the code :

<script language="javascript" type="text/javascript">
    var sys = arbor.ParticleSystem(1000, 700,0.01);
    sys.parameters({gravity:false});
    sys.renderer = Renderer("#viewport") ;
    var data = {
    nodes:{
    STRUCTURE:{'color':'black','shape':'rect','label':'STRUCTURE', },
    Engineering:{'color':'salmon','shape':'rect','label':'Engineering'},
    Architecture:{'color':'salmon','shape':'rect','label':'Architecture'},
    ArtsSciences:{'color':'salmon','shape':'rect','label':'Arts & Sciences'},
    EarthEnergy:{'color':'salmon','shape':'rect','label':'Earth & Energy'},
    SustainableDesign:s{'color':'lightskyblue','shape':'rect','label':'Sustainable Design'},
    sutabledesignleaf1:{'color':'lawngreen','shape':'rect','label':'Earthen Structures'},
    MaterialsStructures:{'color':'lightskyblue','shape':'rect','label':'Materials & Structures'},
    MaterialsStructuresleaf1:{'color':'lawngreen','shape':'rect','label':'AEROSPACE/MECH. ENGINEERING'},
    LithosphereDynamics:{'color':'lightskyblue','shape':'rect','label':'Lithosphere Dynamics'},
    Energy:{'color':'lightskyblue','shape':'rect','label':'Energy'},
    LithosphereDynamicsleaf1:{'color':'lawngreen','shape':'rect','label':'Structure/Tectonophy'},
    Energyleaf1:{'color':'lawngreen','shape':'rect','label':'Structural Control on Reservoirs'},
    ArtsSciencesleaf1:{'color':'lawngreen','shape':'rect','label':'VARIOUS THEMES Market Structure'},
    },
    edges:{
    STRUCTURE:{ Engineering:{}, Architecture:{} , ArtsSciences:{}, EarthEnergy:{}},
    ArtsSciences:{ArtsSciencesleaf1:{}},
    EarthEnergy:{Energy:{},LithosphereDynamics:{}},
    Energy:{Energyleaf1:{}},
    LithosphereDynamics:{LithosphereDynamicsleaf1:{}},
    Engineering:{MaterialsStructures:{}},
    MaterialsStructures:{MaterialsStructuresleaf1:{}},
    Architecture:{SustainableDesign:{}},
    SustainableDesign:{sutabledesignleaf1:{}}
    }
    };
    sys.graft(data);
        var canvas =  document.selectElementById('viewport') ;  
    var context  =  canvas.getContext('2d');
      context.font = '40pt Calibri';
    context.fillStyle = 'blue';
</script>

suppose in this code, for STRUCTURE node's label we have "STRUCTURE" but when I want to have like a long text lie "kaskdjhkjahdkjhaskjdhjkahskjdhakjshdkjahdkjhaskjdhkjahsdkjhakjsdhkjashdkjhasdkjhkajshdkjhakjdhkajshdk" it doesn't break it to two lines, it will show up as one line, and even if I put a new line character, it will consider it as a space and it will show that again in one line, any help is appreciated. Thanks in advance

Answer 1

Thank you for your answer, last night, I figured out that unfortunately there is no way on canvas fillText() to draw text in multiple line, so I had to write my wrapper for that, here is the function that I wrote, and it's working right now,

function wrap_text(var rawstring,var line_width)
                {
                    var strarray  = new Array() ;  
                    var temp_str = new Array() ; 
                    var j = 0 ;var i = 0 ;  
                    strarray = text.split(' ');                 
                    var temp = strarray[j] ;
                    j++;
                    while(j < strarray.length)
                    {
                        while(temp.length <30)
                        {
                            temp = temp+" "+strarray[j];
                            j++;
                        }   
                        temp_str[i]=temp ; i++;
                        var temp = "" ;
                    }
                    return temp_str; 
                }
                var wrap_result = wrap_text('kjakjhkjashd kajasd asdmbdmnad nmauhiqwe kbawem mnbasdm',20);

                for (var i = 0; i <wrap_result.length ; i--) 
                {
                    console.log(wrap_result[i]);
                }

Answer 2

I know this post is 2 year too late, though I was still having the same issue and unable to find the solution anywhere. The main problem is the canvas fillText does not support multiple lines. So you have to add multiple lines to the label. The trick is to split out the returns into an array and loop over the array for each new line.

To keep the code clean, I prefer to not to directly edit the function in the files. To get the multiple lines to work add to your custom JS the below function which will override the Cytoscape internal label rendering. Works for both cytoscape.js & cytoscape.min.js

//function to override the default label rending to support multiple lines
;(function($$){ 'use strict';
  var CanvasRenderer = $$('renderer', 'canvas');
    CanvasRenderer.prototype.drawText = function(context, element, textX, textY) {
    var style = element._private.style;
    var parentOpacity = element.effectiveOpacity();
    if( parentOpacity === 0 ){ return; }

    var text = this.setupTextStyle( context, element );

    if ( text != null && !isNaN(textX) && !isNaN(textY) ) {

      var lineWidth = 2  * style['text-outline-width'].value; // *2 b/c the stroke is drawn centred on the middle
      if (lineWidth > 0) {
        context.lineWidth = lineWidth;
        context.strokeText(text, textX, textY);
      }

      //START NEW CODE
      //remove old label rendinging
      //context.fillText(text, textX, textY);

      //explode the text into an array split up by line returns
      var lines = text.split("\n");

      //loop through each of the lines
      for (var index = 0; index < lines.length; ++index) {
        //render the multiple lines
        context.fillText(lines[index], textX, (textY + (style['font-size'].pxValue * 1.2 * index)));
      }
      //END NEW CODE
    }
  };

})( cytoscape );

Answer 3

This question really concerns canvas.fillText() , not arbor.js, see this question . In short, this is a limitation of the fillText function.

That said, you can solve this problem relatively simply. The following all assumes you are basing your rendering on the "atlas" example , but you can figure it out from the idea anyway I think.

      // draw the text
      if (label){
        ctx.font = "bold 11px Arial"
        ctx.textAlign = "center"

        // if (node.data.region) ctx.fillStyle = palette[node.data.region]
        // else ctx.fillStyle = "#888888"
        ctx.fillStyle = "#888888"

        // ctx.fillText(label||"", pt.x, pt.y+4)
        ctx.fillText(label||"", pt.x, pt.y+4)
      }

Check out the code above to see how the text is rendered. We can replace the line ctx.fillText(label||"", pt.x, pt.y+4) with a loop based on multiple lines you want to render. Make your label value something like line 1\\nline 2\\nline 3 , then use String.split() to make it into an array like so:

var lines = label.split("\n");

Now, loop through lines and render a ctx.fillText() for each one. If you are basing your project closely on the examples you may need to adjust the layout to make it look right, but hopefully this has put you on the right track.