key - 带有节点的 Graphviz 图例/键

Question

我正在尝试在 Graphviz 中创建一个图例/键，其中不仅包含文本，还包含节点和边缘。虽然我读过这篇文章，但 HTML 表似乎不适用于我正在尝试做的事情。

现在，我使用的代码是：

digraph G {
fontname="Helvetica";
labelloc=t;
rankdir=LR;
label="Course Graph";

node[style=filled, fontname="Helvetica", colorscheme=greens3, color=1];

subgraph cluster_key {
    rank=min;

    label="Key";
    rankdir=LR;

    kc1[label="Course", peripheries=2, color=2];
    k1[shape=plaintext, style=solid, label="Required Course"]
    prereq[label="Course 1"];
    kc2[label="Course 2"];
    prereq->kc2;
    k2[shape=plaintext, style=solid, label="Course 1 is a prerequisite for Course 2"]
    coreq1[label="Course 1"];
    coreq2[label="Course 2"];
    coreq1->coreq2[dir=both];
    k3[shape=plaintext, style=solid, label="Course 1 and Course 2 are corequisite"]

    or[style="dashed", color="black", shape="diamond", label="OR"];
    or1[label="Course 1"];
    or1 -> or[style="dashed", dir="none"];
    or2[label="Course 2"];
    or2 -> or[style="dashed", dir="none"];
    kc3[label="Course 3"]
    or->kc3;
    k4[shape=plaintext, style=solid, label="You must take either Course 1 OR\nCourse 2 before taking Course 3"]
    { rank=min;k1 k2 k3 k4 }
}

c3[color=3, peripheries=2];
c4[color=3, peripheries=2];

c1->c2[dir=both];
c2->c3;

c4_reqs[style="dashed", color="black", shape="diamond", label="OR"];
c4_reqs->c4;
c2->c4_reqs[style="dashed", dir="none"];
c5->c4_reqs[style="dashed", dir="none"];

}

这段代码的结果是：

这段代码的结果是

但我想要更像这样的东西 - 最好尺寸更小：

ebut 我想要更多类似的东西

score 10 · Accepted Answer

你离得不远了。通过一些小的调整，我得到了以下结果：

在此处输入图像描述

我所做的最重要的更改是使用rank=source而不是rank=min让节点正确排列。

为了修复文本对齐，我曾经\r将文本向右对齐（\l相同但向左对齐）并为所有纯文本节点提供相同的宽度。

整个代码如下所示（我在进行更改的地方添加了一些注释）：

digraph G {
    fontname="Helvetica";
    labelloc=t;
    rankdir=LR;
    label="Course Graph";

    node[style=filled, fontname="Helvetica", colorscheme=greens3, color=1];

    subgraph cluster_key {
        //rank=min; /* this doesn't really do anything for you */

        label="Key";
        //rankdir=LR; /* this is also not needed*/

        kc1[label="Course", peripheries=2, color=2];
        k1[shape=plaintext, style=solid, label="Required Course\r", width=3.5] // Add fixed width so all nodes line up

        prereq[label="Course 1"];
        kc2[label="Course 2"];
        prereq->kc2;
        k2[shape=plaintext, style=solid, label="Course 1 is a prerequisite for Course 2\r", width=3.5]  // Add fixed width

        coreq1[label="Course 1"];
        coreq2[label="Course 2"];
        coreq1->coreq2[dir=both];
        k3[shape=plaintext, style=solid, label="Course 1 and Course 2 are corequisite\r", width=3.5]    // Add fixed width

        or[style="dashed", color="black", shape="diamond", label="OR"];
        or1[label="Course 1"];
        or1 -> or[style="dashed", dir="none"];
        or2[label="Course 2"];
        or2 -> or[style="dashed", dir="none"];
        kc3[label="Course 3"]
        or->kc3;
        k4[shape=plaintext, style=solid, label="You must take either Course 1 OR\rCourse 2 before taking Course 3\r", width=3.5] // Add fixed width

        { rank=source;k1 k2 k3 k4 } // Use "source in stead of min
    }

    c3[color=3, peripheries=2];
    c4[color=3, peripheries=2];

    c1->c2[dir=both];
    c2->c3;

    c4_reqs[style="dashed", color="black", shape="diamond", label="OR"];
    c4_reqs->c4;
    c2->c4_reqs[style="dashed", dir="none"];
    c5->c4_reqs[style="dashed", dir="none"];

}

附带说明一下，可以通过将所有明文节点放在一起来稍微清理代码，因此不必更频繁地声明属性。这将具有节点和等级属性不会在代码中拆分为不同部分的额外好处：

    { 
        rank=source
        node [shape=plaintext, style=solid, width=3.5]

        k1 [label="Required Course\r"]
        k2 [label="Course 1 is a prerequisite for Course 2\r"]
        k3 [label="Course 1 and Course 2 are corequisite\r"]
        k4 [label="You must take either Course 1 OR\rCourse 2 before taking Course 3\r"]
    }

score 0 · Accepted Answer

这是构建此图例/密钥的更小且可以说更简单的方法：

将整个图例放在一个html 表中，并使其成为一个集群标签
使用labelloc和labeljust定位标签/图例/表格
将每个左侧图形转换为独立图像，然后将它们包含在IMG属性中

这个：

 digraph G {
    graph [fontname="Helvetica"  labelloc=t labeljust=c  rankdir=LR]
    graph [label="Course Graph"]
    subgraph clusterAll{
      graph [peripheries=0  labelloc=b labeljust=r  rankdir=LR]
      node[shape=none]
      graph[label=<
        <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
          <TR><TD ALIGN="LEFT" >Required Course</TD>
              <TD ALIGN="LEFT"><IMG SRC="courseKey1a.png"/></TD></TR>
          <TR><TD ALIGN="LEFT" >Course 1 is a prerequisite for Course 2</TD>
              <TD  ALIGN="LEFT"><IMG SRC="courseKey1b.png"/></TD></TR>
          <TR><TD  ALIGN="LEFT">Course 1 and Course 2 are corequisite</TD>
              <TD  ALIGN="LEFT"><IMG SRC="courseKey1c.png"/></TD></TR>
          <TR><TD  ALIGN="LEFT">You must take either Course 1<BR  ALIGN="LEFT"/>OR<BR  ALIGN="LEFT"/>Course 2 before taking Course 3</TD>
              <TD  ALIGN="LEFT"><IMG SRC="courseKey1d.png"/></TD></TR>
        </TABLE>
     >];

    node[shape=oval style=filled, fontname="Helvetica", colorscheme=greens3, color=1];

    c3[color=3, peripheries=2];
    c4[color=3, peripheries=2];

    c1->c2[dir=both];
    c2->c3;

    c4_reqs[style="dashed", color="black", shape="diamond", label="OR"];
    c4_reqs->c4;
    c2->c4_reqs[style="dashed", dir="none"];
    c5->c4_reqs[style="dashed", dir="none"];

    lots -> more -> of -> this -> that -> and -> the -> other
  }
}

产生了这个：

key - 带有节点的 Graphviz 图例/键

2 回答 2

Related

Reference