vis.js create title with multiple lines

user_7034072 0
Viewed 3163

Is there a way to create multiple line title for nodes in "vis.js" library?

I tried a string like "hello \n hi" as title but this does not work.

If I have a super long title, it will get be rendered as one super long line (with or without \n in it) current effect

vis.js-network vis.js javascript
4 Answers

replace '\n' with '< br >' (without the spaces):

string = "hello <br> hi"
user_67902980

Since vis.js makes svg from the dataset, and label is <text> in svg, in label you can not make multiple line easily. You have to use the <tspan> tag: https://www.oreilly.com/library/view/svg-text-layout/9781491933817/ch04.html

For example:

<!DOCTYPE html>
    <HTML>
    <HEAD>
      <meta name="revisit-after" content="30 days" />
      <meta name="Content-Language" content="HU" />
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <script language="JavaScript" type="text/javascript" src="./viz.js"></script>
    
        <style type="text/css">
            .tit {
                font-family: serif;
                font-size: 8px;
                fill: navy;
            } 
        </style>
    </HEAD>    
<BODY>
<div id="G"></div>
        <script type="text/javascript">
        var Skill = 'digraph Skill { '+
         'node [shape=record;]; rankdir=TD;splines=polyline;'+
        'P1 [label=" ¤";width=2.0;height=2.0;fillcolor=magenta;style=filled;fontcolor=black;];' 
        
           '}';
        
        var so = Viz(Skill);
        document.getElementById('G').innerHTML=so.replace(/¤/g, '<tspan class="tit" x="20px" dy="0em">Melee</tspan><tspan  class="tit" x="40px" dy="1em">+2.3 Melee Damage</tspan>');
        </script>
    </BODY>
    </HTML>

Instead of above, try to use the nested fields, it is simpier, but wraps the lines into boxes:

 P1 [label="{Melee|+2.3 Melee Damage}";fillcolor=magenta;style=filled;fontcolor=black;]
user_131295130
Related