我有一个网络,有 14 个节点,每个节点都有一个标签,还有用于将这些节点相互连接的边。我试图为这些节点之一输入一个长标签,不幸的是,arborjs 似乎只是水平地在节点上显示标签,所以我尝试在标签文本“\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>
假设在这段代码中,对于结构节点的标签,我们有“结构”,但是当我想要一个长文本谎言“kaskdjhkjahdkjhaskjdhjkahskjdhakjshdkjahdkjhaskjdhkjahsdkjhakjsdhkjashdkjhasdkjhkajshdkjhakjdhkajshdk”时,它不会将其分成两行,它会显示为一行,并且即使我放置一个新行字符,它也会将其视为空格,并且会再次在一行中显示,任何帮助都会受到赞赏。 提前致谢
最佳答案
谢谢你的回答,昨晚,我发现不幸的是 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]);
}
关于javascript - 如何在arbor js中为每个节点文本添加新行字符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14838497/