How to render dagre-d3 node label with the correct height?

Question

Based on this example, I use dagre-d3 to render a graph within an angularjs' directive.

It works fine with simple label on node:

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

But when I want to render more content on each node like this:

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 
    });
});

Then the size of each node doesn't fit with the node content.

After some googling, I understood that the height of the node is compute by dagre.core.js. I check that the lib is correctly loaded. Now, I'm not sure where to look. Does anyone have an idea how to correctly render the node?

Answer 1

I had similar problem. Check my example:

My HTML label:

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>`;

Style:

.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;}

My JSFidlle: https://jsfiddle.net/damiankoprucki/npLv7gzv/16/

In my case I have to set width and height in CSS for 'div' inside HTML label.

Hope it help you ;)