在节点外添加Dagre d3音符或描述符

Question

是否有一种简单的方法可以在节点中添加注释或对象？因此节点标签在节点中，但是辅助描述符在节点上方还是下方？

我认为我可能需要创建节点，然后再循环然后尝试添加描述符，但是我想我会看看是否有一种更轻松的方法。

  const g = new dagreD3.graphlib.Graph({ compound: true })
        .setGraph({})
        .setDefaultEdgeLabel(() => {});
  g.setNode('N1', {
      label: 'N1',
      shape: 'circle',
  });
  d3.selectAll('g.node').each(function(d) {
      ...
  });

编辑：最终做类似的事情Katejean回答。使用标签创建覆盖层。

'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不久前分叉了(不是我的原始作品，所以向原始作者表示歉意(，但是我认为这个小提琴中的解决方案可能是您正在寻找的解决方案为了。

您可以定义标头元素和一个主体，并将其用作您的"标签"元素。在这里，Bootstrap用于样式。

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
  })
}