この詩的な名前の下には、ツリーのようなデータ構造の便利な表現とその実用的な実装というアイデアがあります。 たぶん、このようなことがすでにどこかで起こっているかもしれませんが、私は会ったことがありません。 そして、友人のエドゥアルドアヴェリシュキンが興味深いアイデアを提案し、それを開発しようとしました。
エンティティツリーの古典的な表現（たとえば、サイトのセクションのメニュー、プログラムのメインメニュー）は、要素のネストが深すぎない「トール」ツリーの場合に非常に便利で明白です。 ドロップダウンメニュー（プログラムのメインストリングメニューとして）またはドロップダウンメニュー（一般的なファイルマネージャーの左ペイン）にかかわらず、すべてが非常に便利で明確です。 しかし、木が低くて広がっている場合はどうでしょうか？ 各親には少数の子がいますが、ネストは、たとえば10に達します。または50 ...
次に、ドロップダウンメニューの場合、水平方向に大きなインデントを取得します。 ドロップダウンのイベントでは...マゾの楽園。
これをかなり狭い部屋の階段として想像してみましょう。 「背の高い木」の場合、非常に狭いが、高いステップになり、すべてがかなり良くなります。 「低木」の場合、私たちはまだ高い高さで壁にぶつかります。
したがって、結論は明らかです。 スパイラル実装。 しかし、それを飛行機に転送する方法は？ マイナス1次元。 ここでは、いくつかのブランチを同時に開くことを犠牲にしなければなりません。 たぶん（そして確かに）、より良い解決策がありますが、私は数学者ではありませんが、私が書いていることは、問題を解決します-トンネル。
実装例
多かれ少なかれ実用的な例を実装したいと思いました。 ツリーに編成された特定の共通属性（タグ）を持つレストランの特定のデータベースを取得します。
- 高コスト
- 安い
- 中
- 親愛なる
- 喫煙
- 禁煙
- 混合
- 喫煙室
- 別館
- 喫煙者向け
- 音
- ミュージック
- 生演奏
- レコードの音楽
- 大声で
- 静かに
- ミュージック
- 子供でも可能です
この記事を説明するツリーは、要素のネストが小さいため、あまり成功していませんが、例としては役立ちます。 後で見られるように、これは必須ではありません-ツリーをナビゲートする利便性に大きなダメージを与えることなく、好きな深さにできます。
これらのタグのレストラン検索システムを設計するタスクがあるとします。 たとえば、Podvyukholevka村の平均的な裕福な家族は、週末にレストランに行くことを決めました。そのうち、村には351人がいます。 家族は頑固で、彼女の各メンバーは性格がありますが、スキャンダルとの長い議論の後、彼らは喫煙者と非喫煙者のために別々の部屋を持ち、騒々しいライブ音楽と完全な補完物である高価なレストランで何を望むかを決めました-ママ、パパと異なる結婚からの5人の子供。 ごめんなさい それが発生しました。
したがって、おおよそのスキームは次のとおりです。 あらゆる種類の交渉、契約のロールバック 、システムへの登録などの後、このシステムへの参加を希望する各村のレストランは、それ自体に関するすべての必要な情報と共にデータベースに入力され、対応するタグのセットでデータベースに接続されます。 インターフェースの実装を省略します、それは重要ではありません。
タグツリー
タグ自体を詳しく見てみましょう。 それぞれには（明らかな親、兄弟、子供などのidに加えて）2つの重要な属性があります。
- virtual-このタグはコンテナー（フォルダー）のみであり、検索には関与しない（フィルターに追加できない）ことを意味します。
- replaces-このタグが置き換える他のタグのリスト。 たとえば、「喫煙者向け」と「子供と一緒にできる」というタグは、多少互換性がありません。 次に、このタグがフィルターに追加されると、「置換」されたタグはフィルターから削除されます。
<?xml version="1.0" ?> <tags> <tag id="1" name="" virtual="1"> <tag id="11" name="" replaces="12 13" /> <tag id="12" name="" replaces="11 13" /> <tag id="13" name="" replaces="11 12" /> </tag> <tag id="2" name="" virtual="1"> <tag id="21" name=" " replaces="221 222 23" /> <tag id="22" name="" virtual="1"> <tag id="221" name=" " replaces="21 23 222 4" /> <tag id="222" name=" " replaces="21 23 221" /> </tag> <tag id="23" name=" " replaces="21 221 222 4" /> </tag> <tag id="3" name="" virtual="1"> <tag id="31" name="" replaces="311 312"> <tag id="311" name=" " replaces="31" /> <tag id="312" name=" " replaces="31" /> </tag> <tag id="32" name="" /> <tag id="33" name="" /> </tag> <tag id="4" name=" " replaces="23 221" /> </tags>
<?xml version="1.0" ?> <items> <item id="1" name=" " tags="13 221 311 312 32 33 4" /> <item id="2" name=" " tags="11 23 32 33" /> <item id="3" name=" " tags="12 21 311 32 4" /> </items>
繰り返しますが、実装はデモです。 JSONを使用することも、音声認識システムで音声録音を使用することもできます。
クライアント側-トンネル
さらに、村の各居住者は、iPad（Podvyukholevka全体が高速Wi-Fiネットワークで覆われている）から、これに似たものを見る特別なサイトに移動できます （参照により、実例です;いくつかの湿った実施形態について謝罪します-これはデモプロトタイプです）まだ開発中です; SVG + JS + CSS）：
- 検索フィルターにタグを追加するには、タグを中央にドラッグします。
- 「仮想」タグを中央にドラッグすると、その子は単純に開きます。 非仮想-彼の子供（もしあれば）が開き、彼はフィルターに追加されます。
- タグを1回クリック（タップ）するだけで、彼の子供（もしあれば）が開きます。
- タグを「out」にドラッグすると、その子は閉じられます。
- 中央で選択したタグは、外側にドラッグすることでそこから削除できます。
さて、一般的に、このトンネルの本質。 子供が開くと、親と兄弟の周囲が広がり、その代わりに、子供の周囲が現れます。 つまり、トンネル内をさらに進んでいます。 子供を閉じるとき（または親の兄弟を選択するとき）、それぞれトンネルを通って後退します。 マウスホイール（または5つ）で子供を開けたり開けたりすることなく、単に人為的にトンネル内を移動できます。
したがって、目標は達成されます-同じレベルの兄弟がほとんどいない（円にあまり収まらない）ツリーでは、可視性を失うことなく非常に緑豊かで深いツリーを表現する実質的に無限の可能性があります。
コメント、提案、批評を歓迎します。