Vis.js network node customization: cards as nodes

Question

I would like to build a network where the nodes represent information that is structured similarly to cards. With a card I mean a structure composed of two areas:

1. multi-line text area where I can put information that comes from different resources, like a name, a phone number, an address and
2. control area where I can have 2-3 buttons (preferably with icons) that maximize the node, or make the node a root/main one etc.

As far as I could see from the vis.js documentation see example here, it is possible to enter paragraph/text as a node label but there is no way to structure a node via Html.

Can I reach this by using vis.js/Network or should I go for another library?

Answer 1

Unfortunately, no. As of Jan 2018, node labels don't support html in general (they are a part of canvas so it's not easy to incorporate arbitrary html pieces into it). There's only a limited markup (both html-emulating and markdown) which allows several font sizes/colors/families in the same label (up to 4, afaik, = plain and inside <b>, <i> and <code> "tags") + you may use an image as the node's shape (shape: 'icon' or 'image' or 'circularImage').

Here you may find an example of usage of the multifont approach: they define

var options = {
  nodes: {
    font: {
      multi: true,
      bold: {
        mod: '',
        color: '#ff0000'
      }
    }
  }
}

in options and such label for a node:

label: '<b>3306</b>\n3307\n3308'

Considering the particular "cards case" (desribed in comments)

You can create a multi-line textarea indeed, but creating buttons is only possible in a hacky way. You can try the following workaround:

• add buttons as new network nodes hovering above the card itself with custom click handlers;
• if you need to move such cards as a whole via drag&drop, you have also to select all "button nodes" corresponding to the card when the card gets selected and make selection of those buttons indistinguishable from the non-selected state.

This may have some side-effects/involve an amount of additional coding, but at least will work like you have described.

PS: html inside SVG technique

In this question the author uses an interesting technique of injecting html into a vis.js graph using SVGs. I'm not aware of limits of that technique (aside that only non-interactive html can be inserted) so may be it deserves a try.