3

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

4

1 回答 1

3

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

我的 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”设置宽度和高度。

希望对您有所帮助；）

于 2018-03-13T08:25:38.433 回答