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
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
- I am guessing you are using the network module, I have been working with this library a lot recently. feel free to reach out if you have issues. – Don M Commented Jul 26, 2017 at 0:36
4 Answers
Reset to default 5You have two options.
In your data obj, for your nodes.
data_obj["title"] = "<pre>1</pre><pre>2</pre>"
Or
data_obj["title"] ="1 </br> 2</br>"
Either will do the job.
In my project, I load the nodes and call function that converts my labels to correct format
// Here i just get the data that i passed from controller
var network_nodes = JSON.parse(document.getElementById("network_nodes").innerText);
nodes = new vis.DataSet(setLabels());
// I wanted to separate my label for every word but you can put here any label-formating function
function setLabels() {
network_nodes.forEach(function(node){
node.label = node.label.split(" ").join("\n");
});
return network_nodes;
};
replace '\n' with '< br >' (without the spaces):
string = "hello <br> hi"
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./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;]