如何渲染具有正确高度的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中为HTML标签中的'div‘设置宽度和高度。

希望它能对您有所帮助;)