HTML 5 Canvasに基づいて描かれた電気通信ネットワークのトポロジー

電気通信網構造(telecommunication network structure)とは、電気通信網の各種ネットワークユニットが技術的要件と経済原則に従って組み合わせて配置される組合せ論理と配置形式を指す.組合せ論理は、ネットワーク機能のアーキテクチャを記述し、構成形態は、ネットワークユニットの隣接関係、すなわち、交換中心(またはノード)と伝送リンクからなるトポロジー構造を記述する.よく見られるネットワークトポロジには、星型構造、バス構造、リング構造、ツリー構造、網状構造、ハイブリッド型トポロジ、セルラートポロジなどがありますが、本稿の例では主にバス型トポロジを描き、他の構造タイプに比べて表示がより明確で、描画も非常に容易です.
タイトルの名前は電気通信ネットワークトポロジーですが、基本ネットワーク図、ネットワークトポロジー図、ラック図、ネットワーク通信図、3 Dネットワーク図など、ほとんどのトポロジー図がカバーされています.
効果図は以下の通りです.
この図は簡単そうに見えますが、コードも少ないですが、内容は少なくありません.
まず、キャビネット01、キャビネット02、キャビネット03はhtである.グループタイプGroupタイプは、親コンテナとして子エンティティを含むために使用され、GraphViewトポロジー(http://www.hightopo.com)をダブルクリックして連結を展開すると、連結時に子孫エンティティノードが自動的に非表示になり、子ノードが外部に接続されている場合、連結されたGroupはエージェントを接続します.Groupの移動は子供ノードの追従を牽引し,子供の位置や大きさの変化もGroupの展開パターンやposition位置に影響する.
ここでは、エージェントの接続について説明します.「エージェント」という文字は、エージェントの接続の意味をよく示すことができます.実際には、グループの内部のノードがグループの外部のノードと接続されている場合、グループが結合されると、このグループで「エージェント」と外部ノードの間の接続が行われ、これがエージェントの接続です.キャビネット02についてお話ししましょう.キャビネット02の内部には「コンピュータ」と「内部ネットワークスイッチ」の間に2つのケーブルが接続されています.キャビネット02をダブルクリックすると、実際にはキャビネット02と「内部ネットワークスイッチ」の間に2つのケーブルが接続されています.
では、このグループとグループ内のノードを描く方法を見てみましょう.まず「キャビネット02」のGroupノードを作成します.例全体で3つのGroupノードを作成し、作成方法が似ているので、グループを作成するコードをカプセル化して多重化します.

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です.ノードタイプのノードなので、私もカプセル化しました.

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);//    02
createNode('images/  .json', cabinet, 78, 440).s('label', '        ');//    “  ”     ，           “        ”

接続には「ソースノード」と「エンドノード」が必要です.ソースノードは中間の「内部ネットワークスイッチ」です.このノードを作成します.

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,
});

気づいたかどうかはわかりませんが、label 2のスタイル属性があります.これはHTが1つのノードに2つのlabelテキストを追加できるように追加した機能です.label属性とlabel 2の属性は完全に同じで、属性を設定するときにlabelとlabel 2で区別すればいいのです.
ソースノードとエンドノードが備えられており、接続を作成できます.

createEdge(line, createNode('images/  .json', cabinet, 185, 450), 'rgb(30,232,178)', -100, true);
//  1    ，  2    ，  3     ，  4           ，  5         

もう一つ興味深いのは、「スイッチ」の部分で、一番左側の青い四角形のノードと中間の長尺のノードは一体ではなく、分離されていますが、setHostを通じてノードとノード間の吸着を行い、逆吸着して戻ります.このように操作すると、この2つのノードが一体であることに相当します.

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      

コード解釈はこれらです.また分からないことは伝言や私信でもいいので、みんなで検討してもいいです.