add Dagre D3 note or descriptor outside of node

Question

Is there an easy way to add a note or discriptor to a node? So the node label is in the node, but a secondary descriptor is above or below the node?

I am thinking I might need to create the nodes and then loop over then and try to add the descriptor, but thought I would see if there is an easier way.

  const g = new dagreD3.graphlib.Graph({ compound: true })
        .setGraph({})
        .setDefaultEdgeLabel(() => {});

  g.setNode('N1', {
      label: 'N1',
      shape: 'circle',
  });

  d3.selectAll('g.node').each(function(d) {
      ...
  });

edit: Ended up doing something similar to what KateJean answered with. Used the label to create an overlay.

'label=<' +
    '<table border="0">' +
        '<tr>' +
            '<td height="16"></td>' +
        '</tr>' +
        '<tr>' +
            '<td cellspacing="0" cellpadding="0" height="30" width="100">' +
                `<font color="${color}"><b>${category}</b></font>` +
            '</td>' +
        '</tr>' +
        '<tr>' +
            `<td>${name}</td>` +
        '</tr>' +
    '</table>' +
'>'

Answer 1

I forked this a while ago to play around with (not my original work, so apologies to the original author), but I think the solution in this fiddle may be what you're looking for.

You can define a header element and a body and use that as your "label" element. Here, bootstrap is used for the styling.

https://jsfiddle.net/KateJean/9gtezLfq/

var g = new dagreD3.graphlib.Graph().setGraph({});
for (var i = 0; i < 7; i++) {
  var html = '<div class="panel panel-primary">'
  html += '<div class="panel-heading">' + i + ' Panel</div>'
  html += '<div class="panel-body"><p style= "color: black;">Test<p></div>'
  html += '</div>'
  g.setNode(i, {
    labelType: "html",
    label: html,
    padding: 0
  })
}