☰

思维导图：范围子项的子项、共享子项和边缘颜色渐变

tag-icon • tag-icon mindmaps
思维导图：范围子项的子项、共享子项和边缘颜色渐变

我对思维导图有些疑问。我正在遵循以下模板：

科学互动

计算机科学思维导图

我似乎无法互换这两个代码。我面临的两个主要问题是：

1- 像第二个链接那样为子节点创建子节点，特别是为“a3”创建 2 个子节点，为“b3”创建 3 个子节点。

2- 像第二个链接那样为边缘制作渐变颜色。

我也觉得“c”应该是“a”的子项，而不是不同的范围，因为它们是相连的，这使我想到问题 1。一个加分项是重新排列整个网络，使其看起来更美观（边缘交叉更少）和更小（特别是高度更低），边缘更短。

请查看下面的 MWE，任何帮助都将不胜感激。谢谢！

\documentclass{article}
\usepackage{tikz,times}
\usepackage[paperwidth=25cm,paperheight=22cm,left=1cm,top=1cm]{geometry}

\usetikzlibrary{mindmap,trees,backgrounds}

\pagestyle{empty}

\begin{document}



    \begin{tikzpicture}[mindmap,
     level 1 concept/.append style={level distance=130,sibling angle=30}]
     \begin{scope}[mindmap, concept color=gray]
     \node [concept, ball color=red!50!black, scale=0.375] (a) {a}[clockwise from=-10] 
        child {node [concept, scale=0.6] (a1) {a1}}
        child {node [concept, ball color=green!25!black, scale=0.6] (a2) {a2}}
        child {node [concept, scale=0.6] (a3) {a3}}
        child {node [concept, scale=0.6] (a4) {a4}}
        child {node [concept, scale=0.6] (a5) {a5}}
        child {node [concept, ball color=green!25!black, scale=0.6] (a6) {a6}};
     \end{scope}

     \begin{scope}[mindmap, concept color=gray]
     \node [concept, ball color=red!50!black, scale=0.375] (b) at ([xshift=2cm,yshift=3cm]a.east) {b}[clockwise from=50]
        child {node [concept, ball color=green!25!black, scale=0.6] (b1) {b1}}
        child {node [concept, ball color=green!25!black, scale=0.6] (b2) {b2}}
        child {node [concept, scale=0.6] (b3) {b3}}
        child {node [concept, scale=0.6] (b4) {b4}};
     \end{scope}

     \begin{scope}[mindmap, concept color=gray]
     \node [concept, scale=0.375] (c) at ([xshift=-2cm,yshift=2cm]a.east) {c}[clockwise from=180]
        child {node [concept, scale=0.6] (c1) {c1}}
        child {node [concept, ball color=green!25!black, scale=0.6] (c2) {c2}}
        child {node [concept, ball color=green!25!black, scale=0.6] (c3) {c3}};
     \end{scope}

     \begin{pgfonlayer}{background}
     \draw [circle connection bar]
        (a4) edge (a5)
        (a1) edge (b)
        (a1) edge (b4)
        (a6) edge (b)
        (a) edge (c)
        (a5) edge (c)
        (b1) edge (c)
        (c1) edge (c3)
        (b1) edge (c);
     \end{pgfonlayer}

    \end{tikzpicture}

\end{document}

它产生以下内容：

平均能量损失

答案1

  1. 在需要的地方嵌套child {node {}}构造；根据要求，我为 生成了两个子级，a3为 生成了三个子级b3。

  2. 您可以使用

    circle connection bar switch color=from (<start color>) to (<endcolor>)

    请参阅我的示例代码末尾的路径。

代码：

\documentclass{article}
\usepackage{tikz,times}
\usepackage[paperwidth=25cm,paperheight=22cm,left=1cm,top=1cm]{geometry}
\usetikzlibrary{mindmap,trees,backgrounds}

\pagestyle{empty}

\begin{document}

    \begin{tikzpicture}[mindmap,
     level 1 concept/.append style={level distance=130,sibling angle=30}]
     \begin{scope}[mindmap, concept color=gray,circle connection bar switch color=from (red) to (blue)]
     \node [concept, ball color=red!50!black, scale=0.375] (a) {a}[clockwise from=-10] 
        child {node [concept, scale=0.6] (a1) {a1}}
        child {node [concept, ball color=green!25!black, scale=0.6] (a2) {a2}}
        child {node [concept, scale=0.6] (a3) {a3}
                     child {node[concept,scale=0.4]  (a31) {a31}}
                     child {node[concept,scale=0.4]  (a32) {a32}}
        }
        child {node [concept, scale=0.6] (a4) {a4}}
        child {node [concept, scale=0.6] (a5) {a5}}
        child {node [concept, ball color=green!25!black, scale=0.6] (a6) {a6} 
        };
     \end{scope}

     \begin{scope}[mindmap, concept color=gray]
     \node [concept, ball color=red!50!black, scale=0.375] (b) at ([xshift=2cm,yshift=3cm]a.east) {b}[clockwise from=50]
        child {node [concept, ball color=green!25!black, scale=0.6] (b1) {b1}}
        child {node [concept, ball color=green!25!black, scale=0.6] (b2) {b2}}
        child {node [concept, scale=0.6] (b3) {b3}
                child {node[concept,scale=0.4]  (b31) {b31}}
                child {node[concept,scale=0.4]  (b32) {b32}}
                child {node[concept,scale=0.4]  (b33) {b33}}
         }
        child {node [concept, scale=0.6] (b4) {b4}};
     \end{scope}

     \begin{scope}[mindmap, concept color=gray]
     \node [concept, scale=0.375] (c) at ([xshift=-2cm,yshift=2cm]a.east) {c}[clockwise from=180]
        child {node [concept, scale=0.6] (c1) {c1}}
        child {node [concept, ball color=green!25!black, scale=0.6] (c2) {c2}}
        child {node [concept, ball color=green!25!black, scale=0.6] (c3) {c3}};
     \end{scope}

     \begin{pgfonlayer}{background}
     \path [circle connection bar]
        (a4) edge (a5)
        (a1) edge (b)
        (a1) edge (b4)
        (a6) edge (b)
        (a) edge (c)
        (a5) edge (c)
        (b1) edge (c)
        (c1) edge (c3)
        (b1) edge (c);
     \end{pgfonlayer}
    \path 
        (b) to[circle connection bar switch color=from (red!80!black) to (green!85!black)] (b2);
    \path 
        (b) to[circle connection bar switch color=from (red!80!black) to (green!85!black)] (b1);
    \path 
        (a) to[circle connection bar switch color=from (red!80!black) to (green!85!black)] (a2);
    \path 
        (a) to[circle connection bar switch color=from (red!80!black) to (green!85!black)] (a6);

    \end{tikzpicture}

\end{document}

在此处输入图片描述

我在这里提出一些修改：

  1. 使用small mindmap而不是那些缩放因子并放大字体（这是我的经验之谈：使用原始设置读取字体是一种折磨）。

  2. 改变一些子项的位置；这大大改善了这一点，因为您可以避免许多交叉连接器；特别是grow=<angle>子项的选项在这里非常有用（请参阅a6下面c2的代码）。

修改后的代码：

\documentclass{article}
\usepackage{tikz,times}
\usepackage[paperwidth=23cm,paperheight=22cm,left=1cm,top=1cm]{geometry}
\usetikzlibrary{mindmap,trees,backgrounds}

\pagestyle{empty}

\begin{document}

    \begin{tikzpicture}[small mindmap,every node/.append style={font=\large},
     level 1 concept/.append style={level distance=130,sibling angle=30}]
     \begin{scope}[mindmap, concept color=gray,circle connection bar switch color=from (red) to (blue)]
     \node [concept, ball color=red!50!black] (a) {a}[clockwise from=-10] 
        child {node [concept] (a1) {a1}}
        child {node [concept, ball color=green!25!black] (a2) {a2}}
        child {node [concept] (a3) {a3}
                     child {node[concept]  (a31) {a31}}
                     child {node[concept]  (a32) {a32}}
        }
        child {node [concept] (a4) {a4}}
        child {node [concept] (a5) {a5}}
        child[grow=75] {node [concept, ball color=green!25!black] (a6) {a6} 
        };
     \end{scope}

     \begin{scope}[mindmap, concept color=gray]
     \node [concept, ball color=red!50!black] (b) at ([xshift=3cm,yshift=2cm]a.east) {b}[clockwise from=50]
        child {node [concept, ball color=green!25!black] (b1) {b1}}
        child {node [concept, ball color=green!25!black] (b2) {b2}}
        child {node [concept] (b3) {b3}
                child {node[concept]  (b31) {b31}}
                child {node[concept]  (b32) {b32}}
                child {node[concept]  (b33) {b33}}
         }
        child {node [concept] (b4) {b4}};
     \end{scope}

     \begin{scope}[mindmap, concept color=gray]
     \node [concept] (c) at ([xshift=-3cm,yshift=6cm]a.east) {c}[clockwise from=180]
        child {node [concept] (c1) {c1}}
        child[grow=45] {node [concept, ball color=green!25!black] (c2) {c2}}
        child {node [concept, ball color=green!25!black] (c3) {c3}};
     \end{scope}

     \begin{pgfonlayer}{background}
     \path [circle connection bar]
        (a4) edge (a5)
        (a1) edge (b)
        (a1) edge (b4)
        (a6) edge (b)
        (a) edge (c)
        (a5) edge (c)
        (b1) edge (c)
        (c1) edge (c3)
        (b1) edge (c);
     \end{pgfonlayer}
    \path 
        (b) to[circle connection bar switch color=from (red!80!black) to (green!85!black)] (b2);
    \path 
        (b) to[circle connection bar switch color=from (red!80!black) to (green!85!black)] (b1);
    \path 
        (a) to[circle connection bar switch color=from (red!80!black) to (green!85!black)] (a2);
    \path 
        (a) to[circle connection bar switch color=from (red!80!black) to (green!85!black)] (a6);

    \end{tikzpicture}

\end{document}

结果：

在此处输入图片描述

并且其中的一个变体c是其子项a（您必须决定是否是这种情况）：

\documentclass{article}
\usepackage{tikz,times}
\usepackage[paperwidth=23cm,paperheight=22cm,left=1cm,top=1cm]{geometry}
\usetikzlibrary{mindmap,trees,backgrounds}

\pagestyle{empty}

\begin{document}

    \begin{tikzpicture}[small mindmap,every node/.append style={font=\large},
     level 1 concept/.append style={level distance=130,sibling angle=30}]
     \begin{scope}[mindmap, concept color=gray,circle connection bar switch color=from (red) to (blue)]
     \node [concept, ball color=red!50!black] (a) {a}[clockwise from=-10] 
        child {node [concept] (a1) {a1}}
        child {node [concept, ball color=green!25!black] (a2) {a2}}
        child {node [concept] (a3) {a3}
                     child {node[concept]  (a31) {a31}}
                     child {node[concept]  (a32) {a32}}
        }
        child {node [concept] (a4) {a4}}
        child {node [concept] (a5) {a5}}
        child[grow=120] {node[concept] (c) {c}
            child {node [concept] (c1) {c1}}
           child[grow=45] {node [concept, ball color=green!25!black] (c2) {c2}}
           child {node [concept, ball color=green!25!black] (c3) {c3}}
            }
        child[grow=55] {node [concept, ball color=green!25!black] (a6) {a6} 
        };
     \end{scope}

     \begin{scope}[mindmap, concept color=gray]
     \node [concept, ball color=red!50!black] (b) at ([xshift=4cm,yshift=2cm]a.east) {b}[clockwise from=50]
        child[grow=110] {node [concept, ball color=green!25!black] (b1) {b1}}
        child {node [concept, ball color=green!25!black] (b2) {b2}}
        child {node [concept] (b3) {b3}
                child {node[concept]  (b31) {b31}}
                child {node[concept]  (b32) {b32}}
                child {node[concept]  (b33) {b33}}
         }
        child {node [concept] (b4) {b4}};
     \end{scope}

     \begin{scope}[mindmap, concept color=gray]
%     \node [concept] (c) at ([xshift=-3cm,yshift=6cm]a.east) {c}[clockwise from=180]
%        child {node [concept] (c1) {c1}}
%        child[grow=45] {node [concept, ball color=green!25!black] (c2) {c2}}
%        child {node [concept, ball color=green!25!black] (c3) {c3}};
     \end{scope}

     \begin{pgfonlayer}{background}
     \path [circle connection bar]
        (a4) edge (a5)
        (a1) edge (b)
        (a1) edge (b4)
        (a6) edge (b)
        (a) edge (c)
        (a5) edge (c)
        (b1) edge (c)
 %       (c1) edge (c3)
        (b1) edge (c);
     \end{pgfonlayer}
    \path 
        (b) to[circle connection bar switch color=from (red!80!black) to (green!85!black)] (b2);
    \path 
        (b) to[circle connection bar switch color=from (red!80!black) to (green!85!black)] (b1);
    \path 
        (a) to[circle connection bar switch color=from (red!80!black) to (green!85!black)] (a2);
    \path 
        (a) to[circle connection bar switch color=from (red!80!black) to (green!85!black)] (a6);

    \end{tikzpicture}

\end{document}

在此处输入图片描述

为选定的连接栏添加纯色（即非阴影）似乎并不像我想象的那么直接；在下面的例子中，我定义了一个connection bar color允许分配纯色的键（尽管可以使用，circle connection bar switch color=from (<color>) to (<color>)但这可能会在计算上很繁重，因为在后台它是一种阴影）：

\documentclass{article}
\usepackage{tikz,times}
\usepackage[paperwidth=23cm,paperheight=22cm,left=1cm,top=1cm]{geometry}
\usetikzlibrary{mindmap,trees,backgrounds}

\pagestyle{empty}

\begin{document}

    \begin{tikzpicture}[small mindmap,every node/.append style={font=\large},
     level 1 concept/.append style={level distance=130,sibling angle=30},
     connection bar color/.style={every circle connection bar/.append style={
            append after command={[fill=#1]}}}]
     \begin{scope}[mindmap, concept color=gray,circle connection bar switch color=from (red) to (blue)]
     \node [concept, ball color=red!50!black] (a) {a}[clockwise from=-10] 
        child {node [concept] (a1) {a1}}
        child {node [concept, ball color=green!25!black] (a2) {a2}}
        child {node [concept] (a3) {a3}
                     child {node[concept]  (a31) {a31}}
                     child {node[concept]  (a32) {a32}}
        }
        child {node [concept] (a4) {a4}}
        child {node [concept] (a5) {a5}}
        child[grow=120] {node[concept] (c) {c}
            child {node [concept] (c1) {c1}}
           child[grow=45] {node [concept, ball color=green!25!black] (c2) {c2}}
           child {node [concept, ball color=green!25!black] (c3) {c3}}
            }
        child[grow=55] {node [concept, ball color=green!25!black] (a6) {a6} 
        };
     \end{scope}

     \begin{scope}[mindmap, concept color=gray]
     \node [concept, ball color=red!50!black] (b) at ([xshift=4cm,yshift=2cm]a.east) {b}[clockwise from=50]
        child[grow=110] {node [concept, ball color=green!25!black] (b1) {b1}}
        child {node [concept, ball color=green!25!black] (b2) {b2}}
        child {node [concept] (b3) {b3}
                child {node[concept]  (b31) {b31}}
                child {node[concept]  (b32) {b32}}
                child {node[concept]  (b33) {b33}}
         }
        child {node [concept] (b4) {b4}};
     \end{scope}


    \path 
        (b) to[circle connection bar switch color=from (red!80!black) to (green!85!black)] (b2);
    \path 
        (b) to[circle connection bar switch color=from (red!80!black) to (green!85!black)] (b1);
    \path 
        (a) to[circle connection bar switch color=from (red!80!black) to (green!85!black)] (a2);
\begin{scope}[circle connection bar,connection bar color=cyan!70!black]
    \path 
        (a4) to (a5);
    \path 
        (a1) to (b);
    \path 
        (a1) to (b4);
\end{scope}        
    \path 
        (a6) to (b);
\begin{scope}[circle connection bar,connection bar color=orange!70!black]
    \path 
        (a5) to (c);
    \path 
        (b1) to (c);
    \path 
        (c1) to (c3);
    \path 
        (b1) to (c);
\end{scope}        
    \path 
        (a) to[circle connection bar,connection bar color=yellow!70!black] (a3);
    \path 
        (a) to[circle connection bar,connection bar color=magenta!70!black] (a4);
    \end{tikzpicture}

\end{document}

在此处输入图片描述

答案2

另一个建议。此解决方案添加了c一个子节点，并a为子节点添加了子节点。此外，还为父节点定义了 a，这样当子节点有自己的节点时就可以看到渐变效果（参见子节点 a3、b3 和 c）。您可能希望删除命令以探索其他可能性。注意：控制第一个子节点从 40 度 CW 开始，同时控制子节点之间的分离。a3b3concept color=blue, text=blackconcept colorball color=<some color>clockwise from=40sibling angle=30

在此处输入图片描述

代码

\documentclass{article}
\usepackage{tikz,times}
\usepackage[paperwidth=25cm,paperheight=22cm,left=1cm,top=1cm]{geometry}
\usetikzlibrary{mindmap,trees,backgrounds}
\pagestyle{empty}

\begin{document}
\begin{tikzpicture}
\path[mindmap, concept color=blue, text=black, 
level 1 concept/.append style={level distance=130,sibling angle=30},
level 2 concept/.append style={text=black,sibling angle=40}
]

node [concept, scale=0.375,ball color=red!50!black] (a) {a}[clockwise from=-30] 
        child {node [concept, scale=0.6] (a1) {a1}}
        child {node [concept, scale=0.6, ball color=green!25!black] (a2) {a2}}
%
        child [concept color=red]{node[concept, scale=0.6]  (a3) {a3}[clockwise from=-70]
        child {node [concept, scale=0.6] (a31) {a31}}
        child {node [concept, scale=0.6] (a32) {a32}}
}
        child {node [concept, scale=0.6] (a4) {a4}}
        child {node [concept, scale=0.6] (a5) {a5}}
        child {node [concept, scale=0.6, ball color=green!25!black] (a6) {a6}}
%
        child[concept color=green] {node [scale=0.6,concept,ball color=red!50!black] (c) at ([xshift=-3cm,yshift=3cm]a.east) {c}[clockwise from=180]
        child {node [concept, scale=0.6] (c1) {c1}}
        child {node [concept, scale=0.6,ball color=green!25!black,text=yellow] (c2) {c2}} 
%
        child {node [concept, scale=0.6, ball color=green!25!black,text=yellow] (c3) {c3}} 
%
}
node [concept, scale=0.375,ball color=red!50!black] (b) at ([xshift=2cm,yshift=3cm]a.east) {b}[clockwise from=40]
        child {node [concept, scale=0.6, ball color=green!25!black] (b1) {b1}}
%
        child {node [concept, scale=0.6, ball color=green!25!black] (b2) {b2}}
%
        child[concept color=green] {node [concept, scale=0.6] (b3) {b3}[clockwise from=20]
        child {node [concept, scale=0.6] (b31) {b31}}
        child {node [concept, scale=0.6] (b32) {b32}}
        child {node [concept, scale=0.6] (b33) {b33}}
}
        child {node [concept, scale=0.6] (b4) {b4}};

     \begin{pgfonlayer}{background}
     \draw [circle connection bar]
        (a4) edge (a5)
        (a1) edge (b)
        (a1) edge (b4)
        (a6) edge (b)
        (a) edge (c)
        (a5) edge (c)
        (b1) edge (c)
        (c1) edge (c3)
        (b1) edge (c);
     \end{pgfonlayer}
    \end{tikzpicture}
\end{document}

相关内容