在节点外添加 Dagre D3 注释或描述符
add Dagre D3 note or descriptor outside of node
有没有一种简单的方法可以向节点添加注释或描述符?所以节点标签在节点中,但辅助描述符在节点上方或下方?
我想我可能需要创建节点然后循环并尝试添加描述符,但我想看看是否有更简单的方法。
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>' +
'>'
我前一段时间 fork 这个是为了玩(不是我的原创作品,所以向原作者道歉),但我认为这个 fiddle 中的解决方案可能就是你正在寻找的。
您可以定义一个 header 元素和一个 body 并将其用作您的 "label" 元素。这里,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
})
}
有没有一种简单的方法可以向节点添加注释或描述符?所以节点标签在节点中,但辅助描述符在节点上方或下方?
我想我可能需要创建节点然后循环并尝试添加描述符,但我想看看是否有更简单的方法。
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>' +
'>'
我前一段时间 fork 这个是为了玩(不是我的原创作品,所以向原作者道歉),但我认为这个 fiddle 中的解决方案可能就是你正在寻找的。
您可以定义一个 header 元素和一个 body 并将其用作您的 "label" 元素。这里,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
})
}