電気通信ネットワーク構造とは、電気通信ネットワークのさまざまなネットワークユニットが技術要件と経済原則に従って結合および構成される組み合わせロジックおよび構成形式を指します。組み合わせロジックはネットワーク機能のアーキテクチャを記述し、構成形式はネットワーク ユニットの隣接関係、つまり交換局 (またはノード) と伝送リンクで構成されるトポロジを記述します。一般的なネットワーク トポロジには、スター構造、バス構造、リング構造、ツリー構造、メッシュ構造、ハイブリッド トポロジ、セルラー トポロジなどが含まれます。この記事の例では主にバス トポロジを示していますが、他のネットワーク トポロジとは表示が比較的異なります。タイプがより明確になり、描きやすくなります。
タイトルはテレコムネットワークトポロジ図ですが、基本的なネットワーク図、ネットワークトポロジ図、ラック図、ネットワーク通信図、3Dネットワーク図など、ほぼすべてのトポロジ図をカバーできます。
レンダリングは次のとおりです:
この図はコードが少なく非常にシンプルに見えますが、内容は豊富です。
まず、キャビネット 01、キャビネット 02、およびキャビネット 03 はすべて ht.Group の「グループ」タイプです。 ht.Group タイプは、GraphView トポロジ マップ (http: //www.hightopo.com) をダブルクリックすると展開してマージできます。外部への接続を持つ子ノードがある場合は、マージされたグループが接続をプロキシします。グループの移動により子ノードも追従し、子の位置とサイズの変更はグループの展開された形状と位置にも影響します。
ここでエージェント接続の問題について言及します。「エージェント」という言葉はエージェント接続の意味をよく示しています。実際、グループ内のノードとグループ外のノードの間に接続がある場合、グループがマージされると、グループと外部ノード間の接続が「プロキシ接続」されます。キャビネット 02 を例に挙げると、キャビネット 02 内に「コンピュータ」があり、「内部ネットワーク スイッチ」の間に 2 つの接続があるため、キャビネット 02 をダブルクリックすると、実際にはキャビネット 02 と 2 つの接続が同じになります。 「内部ネットワークスイッチ」 スイッチ間には 2 つの接続があります。
それでは、このグループとグループ内のノードの描画方法を見てみましょう。最初に「キャビネット 02」のグループ ノードを作成します。これは、例全体で 3 つのグループ ノードを作成したためです。作成方法は似ています。グループのコードはカプセル化されて再利用されます:
function createGroup(name, x, y) {
var group = new ht.Group();//组类型 实际上也是一个节点 group.setExpanded(true);//设置展开组 group.setName(name);//设置组的名字 group.s({//设置组的样式style 'group.title.background': 'rgba(14,36,117,0.80)',//组展开后的title背景颜色，仅对group.type为空的类型起作用 'group.background': 'rgba(14,36,117,0.40)',//组展开后的背景颜色 'group.title.align': 'center'//组展开后的title文字水平对齐方式，默认值为'left'，可设置为center和right
}); group.setPosition(x, y);//设置组的位置 group.setImage('images/服务器.json');//设置拓扑上展现的图片信息，在GraphView拓扑图中图片一般以position为中心绘制
dataModel.add(group);//将创建的组节点添加进数据容器中
return group;
}グループはダブルクリックすることで展開および結合できます。展開すると、タイトル バー付きのボックスが表示されます (もちろん、これらはカスタマイズできます)。 ）、マージ時に上記コードで設定したgroup.setImage内の画像が表示されます。
キャビネット内のすべてのノードは ht.Node タイプのノードなので、それらもカプセル化しました:
function createNode(image, parent, x, y) {
var node = new ht.Node();//创建一个 Node 节点
if (image) node.setImage(image);//设置节点的显示图片
if (parent) node.setParent(parent);//设置节点的父亲
if (x && y) node.setPosition(x, y);//设置节点的位置
dataModel.add(node);//将节点添加进数据容器中
return node;
}キャビネット 02 を生成します:
接続には「ソース ノード」と「エンド ノード」が必要です。ここでのソース ノードは、真ん中の「内部ネットワーク スイッチ」です。このノードを作成しましょう:
cabinet = createGroup('机柜02', 146, 445);//创建机柜02createNode('images/正常.json', cabinet, 78, 440).s('label', '数据监控分析系统');//创建带有“正常”图片的节点，并设置这个节点的文字为“数据监控分析系统”
はい、label2 の style 属性があります。これは 2 つのラベル テキストをノードに追加するために HT によって追加された機能です。label 属性と label2 の属性は、設定時にそれらを区別するためにまったく同じです。属性を開くだけです。
ソース ノードとエンド ノードはすべて利用可能であり、接続を行うことができます:
var line = createNode();//创建一个节点line.setSize(725, 20);//设置节点大小line.setPosition(310, 325);//设置节点位置line.s({//设置节点的style属性 'shape': 'roundRect',//决定shape的形状，默认值为空，代表用image绘制。roundRect四周圆角矩形 'shape.background': 'rgba(14,36,117,0.80)',//背景填充颜色，为null代表不填充背景 'shape.border.color': '#979797',//边框颜色 'shape.corner.radius': 10,//该参数指定roundRect类型的圆角半径，默认为空系统自动调节，可设置正数值 'label': '内部网络交换机', //文字内容，默认为空 'label.position': 45,//文字内容，默认为空 'label.offset.x': 50,//文字水平偏移，对于Edge意味着沿着连线方向水平偏移 'label2': '内部网络交换机',//HT默认除了label.*的属性外，还提供了label2.*的属性，用于满足一个图元需要显示双文字的情况 'label2.position': 48, 'label2.offset.x': 50, 'label2.offset.y': 2,
});もう 1 つ興味深い点があります。「スイッチ」部分、左端の青い四角のノードと、真ん中の長いストリップ ノードは統合されておらず、分離されていますが、setHost を使用してノード間を吸着し、次にそれらを逆吸着して戻します。この操作は、2 つのノードが 1 つであることと同等です。
var exchange = createNode('images/交换机.json', null, -53, 313); exchange.setHost(line);//设置吸附line.setHost(exchange);//反吸附 又设置line的吸附为exchange
因为 HT 会按照节点添加进数据容器中的顺序来进行层次的排列，我的交换机是在 line 的添加之后的，所以默认交换机的节点会显示在 line 之下，我们将默认的层级显示关闭，并设置交换机 exchange 显示在数据容器的顶部：
dataModel.setAutoAdjustIndex(false);//将自动调整data在容器中索引顺序的开关关闭dataModel.sendToTop(exchange);//将data在拓扑上置顶
相关推荐：