如何使用正确的高度渲染dagre-d3节点标签？

Question

基于this example，我使用dagre-d3在angularjs'指令中渲染图形。

在节点上使用简单标签可以正常工作：

nodes.forEach(function(node) {
    g.setNode(node.num, {
    labelType: "html",
    label: "<b>"+node.name+"</b>",
    class: "comp",
    width: 150 
    });
});

但是，当我想在每个节点上呈现更多内容时，如下所示：

nodes.forEach(function(node) {
    html = '<div> Header</div>'
    html += '<div>'+node.name+'</div>'
    html += '<div>Footer</div>'
    g.setNode(node.num, {
    labelType: "html",
    label: html,
    class: "comp",
    width: 150 
    });
});

然后每个节点的大小不符合节点内容。

经过一些谷歌搜索，我明白节点的高度是由dagre.core.js计算的。我检查lib是否正确加载。现在，我不确定在哪里看。有没有人知道如何正确渲染节点？

Answer 1

我有类似的问题。检查我的例子：

我的HTML标签：

html = `<div class="node">
        <div class="run-status"></div>
        <div class="name"><p>` + node.name + `</p></div>
        <div class="start"><p>` + node.start.toLocaleTimeString() + `</p></div>
        <div class="elapsed"><p>` + secsToHHMMSS(node.elapsed) + `</p></div>
        <div class="quality-status"></div>
    </div>`;

风格：

.live.map div.node {
width: 12.062726176115803rem;
height: 3.618817852834741rem;
display: grid;
grid-auto-columns: 8% 42% 42% 8%;
grid-auto-rows: 70% 30%;
font: 0.05em 'Courier New', Courier, monospace;
color: white;}

我的JSFidlle：https://jsfiddle.net/damiankoprucki/npLv7gzv/16/

在我的情况下，我必须在CSS标签中为'div'设置CSS的宽度和高度。

希望对你有帮助;）