Javascript 在节点外部添加Dagre D3注释或描述符

Javascript 在节点外部添加Dagre D3注释或描述符,javascript,dagre-d3,Javascript,Dagre D3,有没有一种简单的方法可以向节点添加注释或描述器?那么节点标签在节点中,但是辅助描述符在节点的上方或下方 我想我可能需要创建节点,然后循环并尝试添加描述符,但我想看看是否有更简单的方法 const g = new dagreD3.graphlib.Graph({ compound: true }) .setGraph({}) .setDefaultEdgeLabel(() => {}); g.setNode('N1', { label:

有没有一种简单的方法可以向节点添加注释或描述器?那么节点标签在节点中,但是辅助描述符在节点的上方或下方

我想我可能需要创建节点,然后循环并尝试添加描述符,但我想看看是否有更简单的方法

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

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

  d3.selectAll('g.node').each(function(d) {
      ...
  });
编辑:最终做了一些类似于什么的事情 卡特健回答道。使用标签创建覆盖

'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>' +
'>'
'label='1〕

我前一阵子把它叉出来玩玩(不是我的原创作品,所以向原作者道歉),但我认为这把小提琴中的解决方案可能就是你想要的

您可以定义标题元素和主体,并将其用作“标签”元素。这里,引导用于样式设置

var g=new dagreD3.graphlib.Graph().setGraph({});
对于(变量i=0;i<7;i++){
var html=''
html+=''+i+'面板'
html+='

Test' html+='' g、 集合节点(i{ 标签类型:“html”, 标签:html, 填充:0 }) }


我前一阵子把它叉出来玩玩(不是我的原创作品,所以向原作者道歉),但我认为这把小提琴中的解决方案可能就是你想要的

您可以定义标题元素和主体,并将其用作“标签”元素。这里,引导用于样式设置

var g=new dagreD3.graphlib.Graph().setGraph({});
对于(变量i=0;i<7;i++){
var html=''
html+=''+i+'面板'
html+='

Test' html+='' g、 集合节点(i{ 标签类型:“html”, 标签:html, 填充:0 }) }


这就是我最后要做的。我将把代码作为问题的编辑。这就是我最后要做的。我将把代码作为问题的编辑。
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
  })
}