Search code examples
javascriptsvgvis.jsvis.js-network

Vis.js Network: Complex / Multi Section Node labels?

For the VisJs network application I'm working on I need to be able have users edit separate parts of a node label or mutiple labels within the same node. I know that it is possible to use SVGs for the node images and have those manipulated but I was wondering if there is a cleaner way to do this.

The simplest idea in my head would be having something like node.label1, node.label2 ... Alternatively a single label would have to hold HTML DIVs of different ids that could be manipulated but I guess that wont be an option on the SVG canvas?!

Maybe I just need a hint on what to look for.

Solution

  • After some more thinking I found the following simple workaround: My node Objects look like this:

    let node = {
 id: 1,
 title: 'New Node',
 sublabel1: 'First Label Part',
 sublabel2: 'Second Label Part',
}

node.label = node.title + '\n\n' + node.sublabel1 + '\n\n' + node.sublabel2;

    The sublabels can be modified by user input and the original label component that comes with DataSet() merely assembles the inputs.