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

我有一个网络，有14个节点，每个节点都有一个标签，还有用于将这些节点相互连接的边。我试图为其中一个节点输入一个长标签，不幸的是，arbor js似乎只在水平方向上显示节点上的标签，因此我尝试在标签文本“\n”中添加一个新行字符，并将其呈现为一个空格，因此我想知道是否有人知道如何在arbor js中为节点使用多行标签？ 代码如下：

<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>

var sys=乔木颗粒系统（1000700,0.01）；
系统参数（{gravity:false}）；
sys.renderer=渲染器（“视口”）；
风险值数据={
节点：{
结构：{'color'：'black'，'shape'：'rect'，'label'：'STRUCTURE'，}，
工程学：{'color'：'salmon'，'shape'：'rect'，'label'：'Engineering'}，
架构：{'color'：'salmon'，'shape'：'rect'，'label'：'Architecture'}，
艺术科学：{'color'：'salman'，'shape'：'rect'，'label'：'Arts&Sciences'}，
Eartenergy:{'color'：'salmon'，'shape'：'rect'，'label'：'Earth&Energy'}，
可持续设计：s{'color'：'lightskyblue'，'shape'：'rect'，'label'：'Sustainable Design'}，
sutabledesignleaf1:{'color'：'lawngreen'，'shape'：'rect'，'label'：'earten Structures'}，
材质结构：{'color'：'lightskyblue'，'shape'：'rect'，'label'：'Materials&Structures'}，
材料结构LAF1:{'color'：'lawngreen'，'shape'：'rect'，'label'：'AEROSPACE/MECH.ENGINEERING'}，
岩石圈动力学：{'color'：'lightskyblue'，'shape'：'rect'，'label'：'岩石圈动力学'}，
能量：{'color'：'lightskyblue'，'shape'：'rect'，'label'：'Energy'}，
岩石圈动力学LAF1:{'color'：'lawngreen'，'shape'：'rect'，'label'：'Structure/constructophy'}，
Energyleaf1:{'color'：'lawngreen'，'shape'：'rect'，'label'：'Structural Control on repositors'}，
ArtsSciencesleaf1:{'color'：'lawngreen'，'shape'：'rect'，'label'：'各种主题市场结构'}，
},
边缘：{
结构：{工程：{}，建筑：{}，艺术科学：{}，土能：{}，
艺术科学：{ArtsSciencesleaf1:{}，
地球能量：{能量：{}，岩石圈动力学：{}，
能量：{Energyleaf1:{}}，
岩石圈动力学：{岩石圈动力学SLEAF1:{}}，
工程：{材料结构：{}，
MaterialsStructuresleaf1:{}，
架构：{可持续设计：{}，
可持续设计：{sutabledesignleaf1:{}
}
};
系统移植（数据）；
var canvas=document.selectElementById（'viewport'）；
var context=canvas.getContext（'2d'）；
context.font='40pt Calibri'；
context.fillStyle='blue'；

假设在这段代码中，对于结构节点的标签，我们有“STRUCTURE”，但当我想要像一个长文本谎言“kaskdjhkjahdkjdkjdkjdkjkashkjdkjdahkjhashdkjhakjhakjjjjjjkjhakjkashdk”时，它会显示为一行，即使我放了一个新行字符，它会认为它是一个空间，它将再次表明，在一条线上，任何帮助都值得赞赏。

---

提前感谢

这个问题真正涉及的是canvas.fillText（），而不是arbor.js，请参阅。简而言之，这是

fillText

函数的一个限制

也就是说，您可以相对简单地解决这个问题。下面的所有内容都假设您的渲染基于，但我认为您可以从想法中找到答案

      // 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（标签| |“”，pt.x，pt.y+4）

。将标签值设置为类似于

第1行\nline 2\nline 3的值，然后使用将其设置为如下所示的数组：

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

现在，遍历
行
，并为每一行渲染一个
ctx.fillText（）
。如果您的项目紧密基于示例，您可能需要调整布局以使其看起来正确，但希望这将使您走上正确的轨道。
谢谢您的回答，昨晚，我发现很遗憾，在canvas 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]);
                }

function wrap_text（变量rawstring，变量line_width）
{
var strarray=新数组（）；
var temp_str=新数组（）；
var j=0；var i=0；
strarray=文本分割（“”）；
var-temp=strarray[j]；
j++；
而（j虽然（temp.length我知道这篇文章已经晚了2年，尽管我仍然有同样的问题，并且在任何地方都找不到解决方案。主要问题是canvas fillText不支持多行。因此你必须在标签上添加多行。诀窍是将返回拆分为一个数组，并在每个新lin的数组上循环e

为了保持代码整洁，我不希望直接编辑文件中的函数。要使多行代码正常工作，请将下面的函数添加到自定义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 );

//用于覆盖默认标签呈现以支持多行的函数
；（函数（$$）{‘使用严格’；
var canvasrender=$$（'renderer'，'canvas'）；
CanvasRenderer.prototype.drawText=函数（上下文、元素、textX、textY）{
var style=元素。\u private.style；
var parentOpacity=element.effectiveOpacity（）；
如果（parentOpacity==0）{return；}
var text=this.setupTextStyle（上下文，元素）；
如果（text！=null&&！isNaN（textX）&&&！isNaN（textY））{
var lineWidth=2*style['text-outline-width'].value；//*2 b/c笔划以中间为中心绘制
如果（线宽>0）{
context.lineWidth=线宽；
context.strokeText（文本，tex