ハッシュテーブルを水平に描画する

Question

このデザインはどのように作成するのでしょうか?

それは可能ですかforest？

Answer 1

解決策tikz:

\documentclass{article}
\usepackage{tikz}
\usepackage{expl3}
\usepackage{xparse}

\begin{document}

\newlength{\cellsize}
\setlength{\cellsize}{6mm}

\tikzset{
  cell/.style = {
    draw,
    anchor=west,
    minimum width=\cellsize,
    minimum height=\cellsize,
    text width=\cellsize,
    inner sep=0pt,
    outer sep=0pt,
    line width=1pt,
    execute at begin node = {\small\centering}
  }
}

% current x coord
\newlength{\xcoord}
% current y coord
\newlength{\ycoord}

\ExplSyntaxOn
\tl_new:N \l_template_tl
\tl_set:Nn \l_template_tl {
  \node[cell,*1] at (*2) {*3};
}

\DeclareDocumentCommand{\drawnode}{O{}m}{
  % load template
  \tl_set_eq:NN \l_tmpb_tl \l_template_tl
  % fill node parameters
  \tl_set:Nn \l_tmpa_tl {#1}
  \regex_replace_once:nnN {*1} {\u{l_tmpa_tl}} \l_tmpb_tl
  
  % increment x coord
  \dim_add:Nn \xcoord {\cellsize}
  % fill node location
  \tl_set:Nx \l_tmpa_tl {\dim_use:N \xcoord, \dim_use:N \ycoord}
  \regex_replace_once:nnN {*2} {\u{l_tmpa_tl}} \l_tmpb_tl
  
  % fill node text
  \tl_set:Nn \l_tmpa_tl {#2}
  \regex_replace_once:nnN {*3} {\u{l_tmpa_tl}} \l_tmpb_tl
  
  % use node
  \tl_use:N \l_tmpb_tl
}
\ExplSyntaxOff

\begin{tikzpicture}
% initialize x, y coords before drawing
\setlength{\xcoord}{0mm}
\setlength{\ycoord}{0mm}

\drawnode[fill]{}
\drawnode{1}
\drawnode{2}
\drawnode{3}
\drawnode[draw=green]{4}
\drawnode[draw=green]{5}
\drawnode[draw=green]{6}

% draw another table
% initialize x, y coords before drawing
\setlength{\xcoord}{0mm}
\setlength{\ycoord}{-2cm}

\drawnode[draw=orange,fill=orange]{}
\drawnode{1}
\drawnode{2}
\drawnode{3}
\drawnode[draw=red]{4}
\drawnode[draw=blue]{5}
\drawnode[draw=green]{6}
\drawnode{7}
\end{tikzpicture}

\end{document}

追加情報の追加

スター付きバージョンを使用する\drawnode

\documentclass{article}
\usepackage{tikz}
\usepackage{expl3}
\usepackage{xparse}

\begin{document}

\newlength{\cellsize}
\setlength{\cellsize}{6mm}

\tikzset{
  cell/.style = {
    draw,
    anchor=west,
    minimum width=\cellsize,
    minimum height=\cellsize,
    text width=\cellsize,
    inner sep=0pt,
    outer sep=0pt,
    line width=1pt,
    execute at begin node = {\small\centering}
  }
}

% current x coord
\newlength{\xcoord}
% current y coord
\newlength{\ycoord}

\ExplSyntaxOn
\tl_new:N \l_template_tl
\tl_set:Nn \l_template_tl {
  \node[cell,*1] at (*2) {*3};
}

\DeclareDocumentCommand{\drawnode}{sO{}m}{
  % load template
  \tl_set_eq:NN \l_tmpb_tl \l_template_tl
  % fill node parameters
  \tl_set:Nn \l_tmpa_tl {#2}
  \regex_replace_once:nnN {*1} {\u{l_tmpa_tl}} \l_tmpb_tl
  
  % increment x coord if it is not starred
  \IfBooleanF{#1}{\dim_add:Nn \xcoord {\cellsize}}
  % fill node location
  \tl_set:Nx \l_tmpa_tl {\dim_use:N \xcoord, \dim_use:N \ycoord}
  \regex_replace_once:nnN {*2} {\u{l_tmpa_tl}} \l_tmpb_tl
  
  % fill node text
  \tl_set:Nn \l_tmpa_tl {#3}
  \regex_replace_once:nnN {*3} {\u{l_tmpa_tl}} \l_tmpb_tl
  
  % use node
  \tl_use:N \l_tmpb_tl
}


\ExplSyntaxOff

\begin{tikzpicture}
% initialize x, y coords before drawing
\setlength{\xcoord}{0mm}
\setlength{\ycoord}{0mm}

\drawnode[fill]{}
\drawnode{1}
% starred command will not increment x coord
\drawnode*[draw=none,yshift=5mm]{\tiny id1}
\drawnode*[draw=none,yshift=8mm]{\tiny id2}
\drawnode{2}
\drawnode{3}
\drawnode[draw=green]{4}
\drawnode[draw=green]{5}
\drawnode[draw=green]{6}
\end{tikzpicture}

\end{document}

Answer 2

コメントで述べたように、これは単純な表形式、xcolor、hhline で実行できます。

\documentclass{article}
\usepackage{hhline, array}
\usepackage[table, svgnames]{xcolor}
\usepackage{bigstrut} 


\begin{document}

\sffamily\setlength{\bigstrutjot}{1ex}\setlength{\arrayrulewidth}{1pt}
\begin{tabular}{*{4}{!{\color{black}\vrule width 1pt}wc{3.2mm}}*{3}{|wc{3.2mm}}|}
\hhline{>{\arrayrulecolor{black}}---->{\arrayrulecolor{SeaGreen!60}}|---|<{\arrayrulecolor{black}} }
\cellcolor{black}\bigstrut & 1 & 2 & 3 & 4 & 5 & 6 \\
\hhline{>{\arrayrulecolor{black}}---->{\arrayrulecolor{SeaGreen!60}}|---|}
\end{tabular}

\end{document} 

Answer 3

私もこれに forest を使用するのは最初の考えではありませんでしたが、OP が特に forest を要求したので...

ファントム ノードをルートとして使用します。他のすべてのノードはルートの子です。重なり合う境界線の効果は、TikZ オプション を設定することで実現されますouter xsep=0。(ノードは で描画されますthick。)

\documentclass{article}
\usepackage{forest}

\begin{document}    
\begin{forest}
  [,phantom,s sep=0,for descendants={draw,thick,outer xsep=0}
    [\phantom{0},fill]
    [1]
    [2]
    [3]
    [4,for current and following siblings=green]
    [5]
    [6]
  ]
\end{forest}
\end{document}

ノードの Z 順序を制御するには、 を使用しますdraw tree processing order。これは、ノードを描画する順序をフォレストに指示するノードウォーク スタイルです。マニュアルのセクション 3.4.3 を参照してください。

ハンドラを使用してノードウォークを定義するのが最も簡単です.nodewalk style。マニュアルのセクション 3.8.8 を参照してください。奇妙に見える を取得するにはc1b7b4b5b6b2b3、ノードを描画する順序を書き留めます ( 1745623; 各番号は「N 番目の子に移動する」ことを意味します。この例では、ノードは子番号と一致するように番号が付け直されます)。番号をb(戻る (偽のステップを使用)) で区切り、全体の前にc(現在; ルートはファントム ノードであるため、実際には何もしませんが、 によって戻るノードが提供されます)。各 が親 ( )まで移動するbこの特定のケースでは、は同様に機能します。backu1u7u4u5u6u2u3

\documentclass{article}
\usepackage{forest}

\begin{document}
\begin{forest}
  draw tree processing order/.nodewalk style=c1b7b4b5b6b2b3,
  [,phantom,s sep=0,for descendants={draw,thick,outer xsep=0}
    [1,fill,text=white]
    [2,red]
    [3,green]
    [4,orange]
    [5,blue]
    [6,yellow]
    [7,brown]
  ]
\end{forest}
\end{document}