如何使用GraphViz分离节点的图片和标签?

我正在尝试使用GraphViz显示带有图像和标签的图形。我想在图像下显示标签(请参见图表上的labelloc="b"选项),但是某种程度上它不起作用。标签和图像重叠。

知道我缺少什么吗?

下面是我正在使用的DOT代码以及当前结果。

谢谢!

如何使用GraphViz分离节点的图片和标签?

digraph {
graph [compound=true,labelloc="b"];
node [shape=box];
edge [dir=none];

Label1[label="Label1",image="images/Avatar1.png"];
Label2[label="Label2",image="images/Avatar2.png"];
Label3[label="Label3",image="images/Avatar3.png"];

{ 
    rank=same;
    Label1 -> h0 -> Label2;
    h0[shape=circle,label="",height=0.01,width=0.01];
}
{
    h0_0;
    h0_0[shape=circle,width=0.01];
}

h0 -> h0_0;
h0_0 -> Label3;
}
www274953474 回答:如何使用GraphViz分离节点的图片和标签?

UPD:您只需使用height向解决方案中添加一个imagepos属性:

digraph {
graph [compound=true,labelloc="b"];
node [shape=box];
edge [dir=none];

Label1[
    label="Label1"
    height="2.1"
    imagepos="tc"
    labelloc="b"
    image="images/Avatar1.png"
];
Label2[
    label="Label2"
    height="2.1"
    imagepos="tc"
    labelloc="b"
    image="images/Avatar2.png"
];
Label3[
    label="Label3"
    height="2.1"
    imagepos="tc"
    labelloc="b"
    image="images/Avatar3.png"
];

{ 
    rank=same;
    Label1 -> h0 -> Label2;
    h0[shape=circle,label="",height=0.01,width=0.01];
}
{
    h0_0;
    h0_0[shape=circle,width=0.01];
}

h0 -> h0_0;
h0_0 -> Label3;
}

结果:


或者您也可以使用HTML-like labels,特别是表格:

digraph {
graph [compound=true,labelloc="b"];
node [shape=box];
edge [dir=none];

Label1 [
    shape=plain
    label=<
        <table cellspacing="0" border="0" cellborder="1">
            <tr><td><img src="images/Avatar1.png" /></td></tr>
            <tr><td>Label1</td></tr>
        </table>
    >
];
Label2 [
    shape=plain
    label=<
        <table cellspacing="0" border="0" cellborder="1">
            <tr><td><img src="images/Avatar2.png" /></td></tr>
            <tr><td>Label2</td></tr>
        </table>
    >
];
Label3 [
    shape=plain
    label=<
        <table cellspacing="0" border="0" cellborder="1">
            <tr><td><img src="images/Avatar3.png" /></td></tr>
            <tr><td>Label3</td></tr>
        </table>
    >
];

{
    rank=same;
    Label1 -> h0 -> Label2;
    h0[shape=circle,width=0.01];
}

h0 -> h0_0;
h0_0 -> Label3;
}

代码稍微复杂一些(乍看之下),但值得一提的是,您可以更灵活地控制边界。 结果:

,

通过为节点指定一个“高度”(警告,它们是“英寸”),我使“ labelloc”起作用,因此可以将标签移出图片。我希望盒子上面没有白色的地方,但是比以前好。

enter image description here

本文链接:https://www.f2er.com/3111922.html

大家都在问