CODEWITHSUNDEEP
vis.jsvis.js-network
Steve
Steve

Reputation: 59

vis.js Network Manipulation: Split Node label onto different lines

I am using vis.4.18.1.
I have an interactive chart and nodes can be added or edited by clicking on the map using addNode() and editNode().
How can I set the Node label on multiple lines?
I am collecting the label data using a pop-up form.
I know this can be done when importing initial chart data when the map is created by using newline but this does not work interactively and the node label looks like:
'John Smith\nDate of birth'.
I have also tried setting node font to multi and using html br but this also doesn't work.

Upvotes: 1

Views: 2259

Answers (1)

cityy
cityy

Reputation: 163

Have you tried something along the lines of:

node.username = "John Smith";
node.dateOfBirth = "Jun 18th 1978";
node.label = node.username + "\n" + node.dateOfBirth;

You may extend your node object by properties not inherent to visJS nodes/dataSet. Maybe that way you can work around your issue.

Edit: I just tested this example where node.label = node.title on the initial render and gets expanded when the node is selected.

function expandNode(selectedNode){
  selectedNode.label = selectedNode.title + '\n' + 'a' + '\n' + 'b' + '\n' + selectedNode.problem;
  nodesObj.update(selectedNode); 
}

network.on('select', function(selection){
  let selectedNodes = nodesObj.get(selection.nodes); // nodesObj is a visjs dataSet
  if(selection.nodes.length === 1){
    expandNode(selectedNodes[0]);
  }
}

Collapsed Node Expanded Node

Collapsed & expanded node

Upvotes: 2

Related Questions