☰

如何更改描述图的位置

tag-icon • tag-icon tikz-pgf diagrams smartdiagram
如何更改描述图的位置

在下图中，我想互换矩形和圆形的位置。我想将矩形放在左边，圆形放在右边。我该怎么做？

还有一件事，有没有办法将圆形改为矩形或椭圆形？ 在此处输入图片描述

\smartdiagramset{description title text width=2.5cm,
    description text width=8cm,description width=10cm}
\smartdiagram[descriptive diagram]{
    {$ Step ~1 $,abcdefghigklmno pqrst uvwxyz}% <==============
}

答案1

我使用普通的 TikZ，并附带style@Ignasi 上述答案的一些内容，但没有使用该matrix库。

在此处输入图片描述

\documentclass[tikz,border=5mm]{standalone}
\usetikzlibrary{shadows,shapes.geometric}
\tikzset{
basic/.style={rounded corners,draw=gray,drop shadow,align=center,font=\sffamily},
filling/.style={top color=white,bottom color=#1!80},
description/.style={basic,text width=5cm},
title/.style={basic,ellipse,text width=2cm},
}
\begin{document}
\begin{tikzpicture}
\path[nodes={filling=teal}]
(0,0) node[description] (A) {It is defined as a long piece of timber or metal}
(A.east) node[right,title]{Beam}
;
\path[nodes={filling=magenta}]
(0,-1.2) node[description] (B) {It is a plant having yellow flowers}
(B.east) node[right,title]{Daffodil}
;
\path[nodes={filling=orange}]
(0,-2.4) node[description] (C) {It is defined as a system \dots}
(C.east) node[right,title]{Galaxy}
;
\end{tikzpicture}
\end{document}

答案2

我认为您必须更改smartdiagram代码才能更改描述和文本的位置。由于我不知道该怎么做，这里有一个可能的替代方案matrix。可能有更好的方法来更改行颜色，但我不知道。我愿意接受替代方案。

\documentclass[tikz]{standalone}
\usetikzlibrary{matrix, shadows, shapes.geometric}

\tikzset{
basic/.style={rectangle, rounded corners, draw=gray,  drop shadow, 
    align=center, anchor=center, font=\sffamily},
filling/.style={top color=#1!10, bottom color=#1!80},
title/.style={basic, ellipse, text width=2cm},
description/.style={basic, text width=5cm}
}

\begin{document}
\begin{tikzpicture}
\matrix[matrix of nodes, column sep=1pt, row sep=3mm, 
    column 1/.style={nodes={description}},
    column 2/.style={nodes={title}},
    row 1/.style={nodes={filling=blue}},
    row 2/.style={nodes={filling=red}},
    row 3/.style={nodes={filling=green}},
    ]{
    It is defined as a long piece of timber or metal & Beam\\
    It is a plant having yellow flowers & Daffodil\\
    It is defined as a system \dots & Galaxy\\};

\end{tikzpicture}
\end{document}

在此处输入图片描述

答案3

实际上，您可以通过编辑样式轻松更改节点的排列：

\documentclass{article}
\usepackage{smartdiagram}

\tikzset{
   description title/.append style={
      anchor=west
   },
   description/.append style={
      anchor=east
   }
}

\begin{document}

\smartdiagramset{description title text width=2.5cm,
    description text width=8cm,description width=10cm}
\smartdiagram[descriptive diagram]{
    {$ Step ~1 $,abcdefghigklmno pqrst uvwxyz}% <==============
}

\end{document}

在此处输入图片描述

这种方法的唯一缺陷是描述框的阴影覆盖了带有步骤的节点，这是由于节点仍然按照与之前相同的顺序绘制。

如果要更改此行为，则需要根据包提供的代码定义自己的图表。遗憾的是，该包没有提供添加自定义样式的简单方法，并且无法修补相关的内部命令。

\documentclass{article}
\usepackage{smartdiagram}

\tikzset{
   description title/.append style={
      anchor=west
   },
   description/.append style={
      anchor=east
   }
}

\makeatletter
\newcommand{\smartRevDescriptiveDiagram}[1]{%
    \begin{tikzpicture}[every node/.style={align=center,let hypenation}]
        \foreach \smitem [count=\xi] in {#1}{%
            \edef\col{\@nameuse{color@\xi}}
            %%% reverse the order of the subitems:
            \let\revsitem\empty
            \foreach\currentsmitem in \smitem {
                \ifx\revsitem\empty
                    \xdef\revsitem{\currentsmitem}%
                \else
                    \xdef\revsitem{\currentsmitem,\revsitem}%
                \fi
            }
            %%%
            \foreach \subitem [count=\xii] in \revsitem{%
            \ifnumequal{\xii}{1}{% true
                \node[description,drop shadow]
                (module\xi) at (0,0-\xi*\sm@core@descriptiveitemsysep) {\subitem};
            }{}
            \ifnumequal{\xii}{2}{% true
                \node[description title,drop shadow]
                (module-title\xi) at (0,0-\xi*\sm@core@descriptiveitemsysep) {\subitem};
                }{}
            }%
        }%
    \end{tikzpicture}%
}
\makeatother

\begin{document}

\smartdiagramset{description title text width=2.5cm,
    description text width=8cm,description width=10cm}
\smartRevDescriptiveDiagram{
    {$ Step ~1 $,abcdefghigklmno pqrst uvwxyz}% <==============
}

\end{document}

在此处输入图片描述

最后，正如其他答案所示，使用 Ti钾Z 的shapes.geometric库，你可以将圆形改为椭圆形：

\documentclass{article}
\usepackage{smartdiagram}
\usetikzlibrary{shapes.geometric}

\tikzset{
   description title/.append style={
      anchor=west,
      ellipse,
      inner ysep=10pt
   },
   description/.append style={
      anchor=east,
   }
}

\makeatletter
\newcommand{\smartRevDescriptiveDiagram}[1]{%
    \begin{tikzpicture}[every node/.style={align=center, let hypenation}]
        \foreach \smitem [count=\xi] in {#1}{%
            \edef\col{\@nameuse{color@\xi}}
            %%% reverse the order of the subitems:
            \let\revsitem\empty
            \foreach\currentsmitem in \smitem {
                \ifx\revsitem\empty
                    \xdef\revsitem{\currentsmitem}%
                \else
                    \xdef\revsitem{\currentsmitem,\revsitem}%
                \fi
            }
            %%%
            \foreach \subitem [count=\xii] in \revsitem{%
            \ifnumequal{\xii}{1}{% true
                \node[description, drop shadow]
                (module\xi) at (0,0-\xi*\sm@core@descriptiveitemsysep) {\subitem};
            }{}
            \ifnumequal{\xii}{2}{% true
                \node[description title, drop shadow]
                (module-title\xi) at (0,0-\xi*\sm@core@descriptiveitemsysep) {\subitem};
                }{}
            }%
        }%
    \end{tikzpicture}%
}
\makeatother

\begin{document}

\smartdiagramset{
    description title text width=2.5cm,
    description text width=8cm, 
    description width=10cm
}
\smartRevDescriptiveDiagram{
    {$ Step ~1 $,abcdefghigklmno pqrst uvwxyz}% <==============
}

\end{document}

在此处输入图片描述

相关内容