如何以正确的高度渲染 dagre-d3 节点标签？答案

【问题标题】：How to render dagre-d3 node label with the correct height?如何以正确的高度渲染 dagre-d3 节点标签？
【发布时间】：2018-06-02 20:30:32
【问题描述】：

基于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 是否正确加载。现在，我不知道该去哪里找。有谁知道如何正确渲染节点？

【问题讨论】：

标签： angularjs dagre-d3 dagre

【解决方案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”设置宽度和高度。

希望对你有所帮助；）

【讨论】：