如何在 arbor js 中为每个节点文本添加新行字符

谢谢你的回答，昨晚，我发现不幸的是，画布 fillText(( 无法在多行中绘制文本，所以我不得不为此编写我的包装器，这是我写的函数，它现在正在工作，

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

这篇文章晚了 2 年，尽管我仍然遇到同样的问题并且无法在任何地方找到解决方案。主要问题是画布填充文本不支持多行。因此，您必须在标签中添加多行。诀窍是将返回值拆分为一个数组，并为每个新行遍历数组。

为了保持代码干净，我宁愿不直接编辑文件中的函数。要使多行工作，请将以下函数添加到您的自定义 JS，该函数将覆盖 Cytoscape 内部标签渲染。适用于 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 );

真正涉及canvas.fillText()，而不是乔木.js，请参阅此问题。简而言之，这是fillText功能的限制。

也就是说，您可以相对简单地解决此问题。以下所有假设您是基于"atlas"示例进行渲染的，但我认为无论如何您都可以从这个想法中弄清楚。

      // 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)
      }

查看上面的代码以了解文本的呈现方式。我们可以将线条ctx.fillText(label||"", pt.x, pt.y+4)替换为基于要渲染的多条行的循环。使标签值类似于 line 1'nline 2'nline 3 ，然后使用 String.split(( 将其转换为如下所示的数组：

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

现在，循环遍历lines并为每个ctx.fillText()呈现一个。如果你的项目紧密基于示例，你可能需要调整布局以使其看起来正确，但希望这能让你走上正确的轨道。