HTML5 リング ツリー トポロジ 図_html/css_WEB-ITnose

少し前、プロジェクトでこのような表示の問題に遭遇しました。ツリー状のネットワーク デバイスのグループは、動的なビジネスだけでなく、トポロジ マップ上でツリー状の所属関係も同時に表示する必要があります。任意の 2 つのデバイス間に存在する関係。つまり、トポロジ マップ上には、ツリー状の所属関係と、ノード間にランダムに生成される特定のビジネス関係の 2 つのデータを同時に表示する必要があります。もちろん、接続された線を使用して表示することが要件であり、その形状は明確で混乱のないものでなければなりません。

これは難しい質問です。ツリー構造は表示するのが難しくなく、簡単にレイアウトできます。たとえば、ノードと接続スタイルを設定し、データを twaver の databox に設定すると、layout() 関数を使用して、次の図を取得できます。ただし、2 点間にランダムな接続を追加すると、非常に乱雑になり、適切にレイアウトされなくなります。

解決策を考え続けます。上下関係が深い場合、タイル状のツリーが非常に広く伸びてしまい、転がすのに不便になります。以下に示すように、木を円形に配置できれば、レベルが多すぎることを心配する必要はありません:

twaver.Styles.setStyle('label.position','right.right');twaver.Styles.setStyle('label.font','10px arial');twaver.Styles.setStyle('link.from.xoffset',4);twaver.Styles.setStyle('link.to.xoffset',-4);twaver.Styles.setStyle('link.width',2);twaver.Styles.setStyle('link.color','#CCCCCC');twaver.Styles.setStyle('select.style','none');

この配置の利点は、レベルが多いと木全体が丸まろうとすることです。幅が広すぎたり高すぎたりしないようにしてください。そして層も非常にクリアです。

動的なビジネス接続関係が追加されたらどうなるでしょうか?たとえば、これらの点はコンピューターを表し、線はコンピューター間のソケット接続を表します。いくつかの接続をランダムに生成し、赤で区別します。これはおおよそ次のとおりです:

var root=new twaver.Node();root.setLocation(x,y);root.setClient('level',0);root.setSize(50,50);root.setImage('circle');root.setName(name);root.setClient('group', groupID);root.setClient('root', root);root.setStyle('label.position','center');root.setStyle('label.color','white');root.setStyle('label.font','12px "Microsoft Yahei"');box.add(root);

何をしてもすぐに散らかってしまいます。これでは間違いなく機能せず、ユーザーの目は眩んでしまいます。さらに、2 組の線が絡み合っているため、どちらもはっきりと見えません。

そこで、視覚的な最適化をさらに検討しました。ビジネス接続は動的であり、デバイスに基づいて表示されるため、すべてのビジネス接続を一度に表示する必要はありません。したがって、明るい色を使用してビジネス ラインの存在感を弱めることを検討できます。幸いなことに、HTML5 キャンバスでは、10 進数の線幅と透明度のある色を使用できます。ここでは、ビジネスラインを線幅 0.2、ライトグレー色 #aaaaaa で設定してみます。効果は次のとおりです。

var connection=new twaver.Link(node, target);connection.setStyle('link.width',0.2);connection.setStyle('link.color', 'red');//#aaaaaa');connection.setClient('connection',true);connection.setClient('angle', (target.getClient('angle')+node.getClient('angle'))/2);box.add(connection);

この効果ははるかに優れています。その主な理由は、明るい灰色の線が画像全体の主な構造関係に影響を与えず、ユーザーが一目で画像全体の構造をはっきりと確認できるためです。しかし、ビジネス接続ラインの存在感はそれほど強くなく、強化する必要があります。改善を続けます: マウスをノードの上に移動し、色を変更して関連する接続を強調表示して効果を確認します。

link.setStyle('link.width',0.2);link.setStyle('link.color', '#aaaaaa');

これは、より明確です。レベルがいくつあっても、混乱することはありません。

リングのレイアウト角度と方向をさらに制御すると、より興味深い形状を作成できます:

ほら、トポロジー図は厳密でなければならないなんて誰が言ったのでしょう? 2 組の接続を非常に明確に表示し、同時に存在させることもできます。コードに興味のある学生は、メッセージを残して議論することができます。ありがとうございます。