☰

保持不规则垂直间距的 TikZ 矩阵节点之间的对齐

tag-icon • tag-icon tikz-pgf spacing horizontal-alignment tikz-matrix
保持不规则垂直间距的 TikZ 矩阵节点之间的对齐

我正在尝试创建一个图表，其中包含大小不同的矩形对，每个矩形之间间隔固定。此外，我希望每对矩形在同一点左对齐。以下是我在 QTikZ 中当前草稿的一个示例：

\documentclass{memoir}
\usepackage{tikz}
\usetikzlibrary{shapes,snakes}
\usetikzlibrary{positioning}

\begin{document}

\begin{tikzpicture}[scale=2]
    \tikzstyle{ann} = [draw=none,fill=none,right]
    \matrix[nodes={draw, thick, fill=blue!20,},column 1/.style={anchor=base west},
        row sep=0.0cm,column sep=0.5cm]  {
    \node[rectangle,fill=green] {Category 1};\\
    \node (1) [rectangle] {Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti};\\

    \node[rectangle,fill=green] {Category 2};\\
    \node[rectangle] {Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti};\\

    \node[rectangle,fill=green] {Content Delivery};\\
    \node[rectangle] {This one is much longer -- Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti};\\
    };
\end{tikzpicture}

\end{document}

无间距示例图

不过，这个没有我想要的每对之间的间距。以下这个问题和这个问题，我尝试了三种不同的方法来添加间距，但最终总是得到这样的结果：

\documentclass{memoir}
\usepackage{tikz}
\usetikzlibrary{shapes,snakes}
\usetikzlibrary{positioning}

\begin{document}

    \tikzstyle{ann} = [draw=none,fill=none,right]

    \matrix[nodes={draw, thick, fill=blue!20,},column 1/.style={anchor=base west},
        row sep=0.0cm,column sep=0.5cm]  {
    \node[rectangle,fill=green] {Category 1};\\
    \node (1) [rectangle] {Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti};\\
    };

    \begin{scope}[yshift=-1cm]
    \matrix[nodes={draw, thick, fill=blue!20,},column 1/.style={anchor=base west},
        row sep=0.0cm,column sep=0.5cm]  {
    \node[rectangle,fill=green] {Category 2};\\
    \node[rectangle] {Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti};\\
    };
    \end{scope}

    \begin{scope}[yshift=-2cm]
    \matrix[nodes={draw, thick, fill=blue!20,},column 1/.style={anchor=base west},
        row sep=0.0cm,column sep=0.5cm]  {
    \node[rectangle,fill=green] {Content Delivery};\\
    \node[rectangle] {This one is much longer -- Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti};\\
    };
    \end{scope}
\end{tikzpicture}

\end{document}

有间距问题的图表

我如何才能在保持这种异构间距的同时，让对齐保持一致？

答案1

您可以强制锚定范围本身。

\documentclass[tikz]{standalone}
\usetikzlibrary{matrix}
\begin{document}
\usetikzlibrary{shapes,snakes}
\usetikzlibrary{positioning}
\begin{tikzpicture}[scale=2]

    \tikzset{ann/.style = {draw=none,fill=none,right}}
    \begin{scope}[anchor=west]
    \matrix[nodes={draw, thick, fill=blue!20,},column 1/.style={anchor=base west},
        row sep=0.0cm,column sep=0.5cm]  {
    \node[rectangle,fill=green] {Category 1};\\
    \node (1) [rectangle] {Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti};\\
    };
    \end{scope}

    \begin{scope}[yshift=-1cm,anchor=west]
    \matrix[nodes={draw, thick, fill=blue!20,},column 1/.style={anchor=base west},
        row sep=0.0cm,column sep=0.5cm]  {
    \node[rectangle,fill=green] {Category 2};\\
    \node[rectangle] {Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti};\\
    };
    \end{scope}

    \begin{scope}[yshift=-2cm,anchor=west]
    \matrix[nodes={draw, thick, fill=blue!20,},column 1/.style={anchor=base west},
        row sep=0.0cm,column sep=0.5cm]  {
    \node[rectangle,fill=green] {Content Delivery};\\
    \node[rectangle] {This one is much longer -- Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti};\\
    };
    \end{scope}
\end{tikzpicture}
\end{document}

在此处输入图片描述

另外，不要使用tikzstyle已弃用的。\tikzset而应使用。

答案2

指定一个text width似乎可以完成这项工作：

在此处输入图片描述

或者你可以使用matrix anchor=west：

在此处输入图片描述

代码：text width=：

\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{shapes,snakes}
\usetikzlibrary{positioning}

\begin{document}
\begin{tikzpicture}[scale=2,text width=9cm]

    \tikzstyle{ann} = [draw=none,fill=none,right]

    \matrix[nodes={draw, thick, fill=blue!20,},column 1/.style={anchor=base west},
        row sep=0.0cm,column sep=0.5cm]  {
    \node[rectangle,fill=green] {Category 1};\\
    \node (1) [rectangle] {Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti};\\
    };

    \begin{scope}[yshift=-1cm]
    \matrix[nodes={draw, thick, fill=blue!20,},column 1/.style={anchor=base west},
        row sep=0.0cm,column sep=0.5cm]  {
    \node[rectangle,fill=green] {Category 2};\\
    \node[rectangle] {Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti};\\
    };
    \end{scope}

    \begin{scope}[yshift=-2cm]
    \matrix[nodes={draw, thick, fill=blue!20,},column 1/.style={anchor=base west},
        row sep=0.0cm,column sep=0.5cm]  {
    \node[rectangle,fill=green] {Content Delivery};\\
    \node[rectangle] {This one is much longer -- Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti};\\
    };
    \end{scope}
\end{tikzpicture}
\end{document}

代码：matrix anchor=：

\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{shapes,snakes}
\usetikzlibrary{positioning}

\begin{document}
\begin{tikzpicture}[scale=2, matrix anchor=west]

    \tikzstyle{ann} = [draw=none,fill=none,right]

    \matrix[nodes={draw, thick, fill=blue!20,},column 1/.style={anchor=base west},
        row sep=0.0cm,column sep=0.5cm]  {
    \node[rectangle,fill=green] {Category 1};\\
    \node (1) [rectangle] {Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti};\\
    };

    \begin{scope}[yshift=-1cm]
    \matrix[nodes={draw, thick, fill=blue!20,},column 1/.style={anchor=base west},
        row sep=0.0cm,column sep=0.5cm]  {
    \node[rectangle,fill=green] {Category 2};\\
    \node[rectangle] {Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti};\\
    };
    \end{scope}

    \begin{scope}[yshift=-2cm]
    \matrix[nodes={draw, thick, fill=blue!20,},column 1/.style={anchor=base west}, text width=6cm,
        row sep=0.0cm,column sep=0.5cm]  {
    \node[rectangle,fill=green] {Content Delivery};\\
    \node[rectangle] {This one is much longer -- Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti};\\
    };
    \end{scope}
\end{tikzpicture}
\end{document}

答案3

使用matrix对齐所有节点是一个很好的解决方案，但您不需要将所有块划分到不同的矩阵（或范围）之间以强制行之间进行某些分离。下一篇文章（来自 pgfmanual）解释了一个更简单的解决方案

row-end 命令 \\ 允许您提供一个可选参数，该参数必须是维度。此维度将添加到 row sep 中的列表中。这意味着，首先，您在此参数中列出的任何数字都将作为结束行和下一行之间的额外行分隔符添加 [...]

这意味着虽然\\新行与row sep上一行相距一个距离，但\\[1cm]新行与row sep+1cm上一行有一定距离。您可以每隔一行使用此选项来获得标题块之间的一定距离。

下一个代码使用此解决方案来提供行与行之间的不同距离。它还使用\matrix of nodes（加载matrix库）来节省一些输入。最后一个节点向您展示了如何node options针对特定节点进行更改。

\documentclass{memoir}
\usepackage{tikz}
\usetikzlibrary{shapes,snakes}
\usetikzlibrary{matrix,positioning}

\begin{document}

\begin{tikzpicture}[scale=2,   
    title/.style={rectangle,fill=green,draw,anchor=west,},
    block/.style={rectangle,fill=blue!20,draw,thick,anchor=west,text width=\linewidth}
]

    \matrix[matrix of nodes,
             every odd row/.style={nodes={title}},
             every even row/.style={nodes={block}},
            row sep=-\pgflinewidth]  {
    Category 1\\
    Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti\\[1cm]
    Category 2\\
    Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti\\[1cm]
    Content Delivery\\
    |[text width=.75\linewidth]|This one is much longer -- Lorem ipsum stuff in a wider text box like gibberish, copypasta, limericks, and bathroom graffiti\\
    };
\end{tikzpicture}

\end{document}

在此处输入图片描述

相关内容