2024 年越谷市公民館にて
最近、二分木をかっこよくブラウザで表示させるにはどうすればいいか、悩んでいる。以下は、その苦闘の記録だ。
二分木とは、根付きの木構造の中で、全てのノード（節点、node）が持つ子の数が高々2であるものをいう。これを表示するのは簡単そうだが、ではどうすればいいのかわからない。
まず、ノードの配置をどうすればいいのかがわからない。そして、親から子への有向線分である斜めの線を出すにはどうすればいいのかもわからない。
ノードの配置は最初、table 要素を使って実装しようとしたが、これは table 要素をレイアウトに使おうとしているので誤りだ。 レイアウトのために使うのならば CSS のフレックスボックスかグリッドのいずれかを使わないといけないのだろうが、 どちらも使い方がわからない。
斜めの線を出すには CSS が使えるはずだが、どうすればいいのかがわからない。ひょっとしたら、SVG を使うのがいいのだろうか。それとも canvas を使うのだろうか。
ここで一度自分で考えるのを中止し、検索エンジンに頼ることにした。
そこで検索エンジンで、「javascript や CSS で二分木を表示する方法を教えて」と入力してみた。すると、記事がいくつか見つかった。ただ、私の実装で参考になりそうな記事は、
seiketkm 氏による、 二分木をブラウザにカッコよく描画する(qiita.com)だけだった。 この方法では、vis.js(visjs.org) というライブラリを使っている。 背景は、この記事をもとに作った二分木を表示している。検索エンジンだけではうまくいかないように見えたので、生成 AI に頼ることにした。最初は Google の AI である。回答は次の通りだった。
1. HTML/CSSとJavaScriptを使用する方法
- 二分木のノードをHTMLのdiv要素で表現する: JavaScriptで二分木のデータを元にdiv要素を生成し、CSSでスタイルを適用してノードのように見せます。
- 親子の関係をCSSで表現する: 親ノードのdivの子要素として、その子ノードのdivを配置し、positionプロパティやtransformプロパティを使って配置します。
- 線の描画: CSSだけでは線を引くのが難しい場合は、SVGやCanvas APIを使ってノード間に線を描画します。
2. Canvas APIを使用する方法
- canvas要素をHTMLに配置する: 二分木の描画領域としてcanvas要素を配置します。
- JavaScriptで描画する: Canvas APIを使って、二分木のノード（円や長方形）とエッジ（線）を描画します。
- 利点: 複雑な描画やアニメーションも比較的容易に実装できます。
3. JavaScriptライブラリを使用する方法
- D3.jsなどのライブラリを利用する: D3.jsのようなライブラリは、二分木のようなグラフ構造を扱うための便利な機能を提供しています。
- 描画をライブラリに任せる: 二分木のデータをライブラリに渡すだけで、ノードやエッジの生成、配置、線描画などを自動で行ってくれます。
- 利点: 複雑な描画ロジックを自分で書く必要がなく、迅速に表示を実現できます。
どの方法を選ぶかは、必要な機能や開発の複雑さによって異なります。単純な表示であればHTML/CSSとJavaScript、複雑なアニメーションや操作が必要であればCanvas API、効率的に高品質な表示を行いたい場合はライブラリの利用がおすすめです。
AI にはさらに詳しい回答を求めてみたが、1. 2. に関してはそれほど深い情報は得られず、3. に関しては D3.js のほか vis.js を勧められた程度である。しかし、AI が参考にしたサイトとして、 Nori 氏のプログラミング未経験者がRecursionで1年勉強して、OSS開発にチャレンジした話 (note.com) が挙げられていた。これは役に立ちそうだ。
次に頼った生成 AI は、生成 AI 元祖の ChatGPT である。結果は、JavaScript のコードまで例示してくれた。これは、データ構造に JavaScript を、 線の描画に Canvas API を使って描くコードである。さすが老舗だけのことはある。得られる図は右のとおりである。
ここまでくればあと一息のようだが、実は私のやりたいことは Canvas API では実現できそうにない。 というのは、ノードの値として表示したいのは、 1 とか abc とかの単なる文字列だけではなく、数式も表示したいと思っている。Canvas API を使う限り、数式をノードの値として表示することはできないのではないか。
Canvas がだめなら SVG がある、とも考えたのだが、SVG で文字列を扱う API でも数式を扱うことはできないのではなかっただろうか。まだまだ悩みは尽きない。
ソフトウェア科学のための論理学には構文木を作った例を載せた。
ちなみに数式としては、たとえば論理式がある。この論理式を二分木のノードに書ければ、タブロー図が得られるというわけだ。 論理学を作るなどを参照してほしい。
論理式を二分木に表示するには、画像上に文字を表示するのと同じようにすればできるのではないかと考えた。
そのほか、生成 AI として、Duck.ai にも頼ってみたが、ブラウザに表示させた結果が、通常の２分木とは異なる図になった（ノードから分岐していない）ため、採用できなかった
まりんきょ学問所 ＞ JavaScript 手習い ＞ 二分木の表示
