GoJS

13686 ワード

javascript

GoJSは、インタラクティブな図を実現するためのJavaScriptライブラリです.GoJSはHTML 5機能に依存するJavaScriptライブラリで、
使用

    
< html > 
< head > 
   
  < script  src = “ go-debug .js“ >  script >

CDNが提供するGoJSライブラリに直接リンクします.

GoJSグラフは、

  HTML   HTML   ，          ： 
   
< div  id = “ myDiagramDiv” 
     style = “ width：400px; height：150px; background-color：＃DAE4E4;” >  div >  
  JavaScript     
 idで  されたグラフに まれます.var $ = go.GraphObject.make;
var myDiagram =
  $（go.Diagram，“ myDiagramDiv”）;
  
このgoは、すべてのGoJSタイプが  する「    」であることに  してください.GoJSクラスのすべてのコード   ( えば、 またはノードまたはパネルまたはShapeまたはTextBlock)は、「go.」を   として  します.この  では、GoJSオブジェクトを  するためにgo.GraphObject.makeを  する  を に します.  については、GoJS  Building Objectsを  してください.  として$を い,go.GraphObject.makeはそのように  であり,これから  すると  する.$のコードを  する  は、$$やMAKE、GOなどの なる い   を  することができます.
グラフとモデル
 のノードとリンクは、モデルによって  されるデータの   である.GoJSには、モデルがノードとリンクを  するデータ(JavaScriptオブジェクトの  )を  するモデルビューアーキテクチャがあり、 をビューとして  のノードとリンクオブジェクトを  してこのデータを   します.   にロードして  するのは、 ではなくモデルです.モデルのデータ・オブジェクトに  に  なプロパティを  できます.DiagramクラスやGraphObjectクラスに  を  したり、プロトタイプを  したりしません.
これはモデルと の で、 に  された  の を します.var $ = go.GraphObject.make;
var myDiagram = 
  $（go.Diagram，“ myDiagramDiv”，
    { “ undoManager.isEnabled”：true //  Ctrl-Z   Ctrl-Y   
    }）; var myModel = $（go.Model）;
//      ，        JavaScript    ： 
myModel.nodeDataArray = [ 
  { key：“ Alpha” }，
  { key：“ Beta” }，
  { key：“ Gamma” } 
]; 
myDiagram.model = myModel;
       
                  。          ：

*                   。
*              ，                。
*         ，        ，      。
*     CTRL-C CTRL-V   Control             。
*    Delete        。（      [       ](https://gojs.net/latest/intro/commands.html)。）
*             ，  CTRL-Z CTRL-Y                 。
       
  
スタイルノード
GraphObjectからなるテンプレートを  し、これらのオブジェクトにプロパティを  することで、ノードのスタイルを  します.Nodeを  するには、いくつかの  ベースブロッククラスを  します. Shapeは、  きの    またはカスタムジオメトリ
を  する. TextBlockは、  なフォントのテキスト(    )
を  する.   、    
 Panelは、 のオブジェクトのセットを  するためのコンテナであり、これらのオブジェクトは、Panelの  に じて、テーブル、  スタック、  コンテナなどの なる  で  および  することができる
.
これらのコンストラクションブロックはすべてGraphObject  クラスから ているので、GraphObjectsまたはオブジェクトまたは  と びます.GraphObject_いいえHTML DOM  のため、このようなオブジェクトの  や  にはあまりオーバーヘッドがありません.
モデルデータ  がノードに  を ぼすことを んでいます.これはデータバインドによって われます.データバインディングにより、モデルデータから  した にGraphObjectのプロパティを   に  することで、NodesでのGraphObjectの  と  を  できます.モデルデータオブジェクトは、  のJavaScriptオブジェクトです.モデルのノードデータに  な  のプロパティ を  するように  できます.
デフォルトのノードテンプレートは  です.TextBlockを むノードです.TextBlockのtext  とモデルデータのkey  との にデータバインディングが  する.コードでは、テンプレートは のように えます.myDiagram.nodeTemplate =
  $(go.Node,
    $(go.TextBlock,
      // TextBlock.text is bound to Node.data.key
      new go.Binding("text", "key"))
  );
  
TextBlocks,Shape,PicturesはGoJSの の  ブロックである.TextBlocksに  を めることはできません.シェイプにテキストを めることはできません.ノードにテキストを  させる  は、TextBlockを  する  があります.ジオメトリを  または りつぶす  は、[シェイプ](Shape)を  する  があります.
より   に、Nodeテンプレートのフレームワークは のように えます.myDiagram.nodeTemplate =
  $(go.Node, "Vertical", //  /               
    / *         * / 
    { // Node.location        
      locationSpot: go.Spot.Center
    },

 / *       * / //       Node.location   Node.data.loc  
    new go.Binding("location", "loc"),

  / *     Node  GraphObjects * / // Shape     TextBlock 
    $(go.Shape,
      "RoundedRectangle", //                
       { / *     Shape  * / }，
       //  Shape   Shape.figure   Node.data.fig  
      new go.Binding("figure", "fig")),

    $(go.TextBlock,
      "default text",   //                
      { / *     TextBlock  * / }，
      //  TextBlock   TextBlock.text   Node.data  .key
      new go.Binding("text", "key"))
  );
  
PanelのGraphObjectsのネストは  に くすることができ, クラスには  の  セットが    であるが,これは    を している.
ノードテンプレートの    について  した  、リアルタイムの を てみましょう.   でよく られる  なテンプレート-  の の  を  します. のノードテンプレートを  します.[  ](Horizontal)パネルタイプのノードで、  が  に べて  されていることを します.2つの  があります.
  の  は、  ソースデータ
にバインドされている. のTextBlockは、テキストデータ
をバインドする
  var $ = go.GraphObject.make;
var myDiagram = 
  $（go.Diagram，“ myDiagramDiv”，
    { “ undoManager.isEnabled”：true //  Ctrl-Z   Ctrl-Y   
    }）; //       Node   
myDiagram.nodeTemplate = 
  $（go.Node，“ Horizontal”，
     //             
    { background：“＃44CCFF” }，
    $（go.Picture，//               //         ，            
       


      
      
      //        。
      { margin：10，width：50，height：50，background：“ red” }，
       // Picture.source         “ source”     
      new go.Binding（“ source”））），
    $ （go.TextBlock，“ Default Text”，   // TextBlock.text    //         ，              ： 
      { margin：12，stroke：
      
      “ white”，font：“ bold 16px sans-serif” }，
       // TextBlock.text         name     
      new go.Binding（“ text”，“ name”））
  ））; var model = $（go.Model）; 
model.nodeDataArray = 
[ //  ，                  ；//      ，     “ name” “ source”   
  { name：“ Don Meow”，source：“ cat1.png” }，
  { name：


  ：“” cat2.png“ }，
  { name：” Demeter“，   source：” cat3.png“ }，
  { / *     * /   } 
]; 
myDiagram.model =model;
  
すべての  が  しない  、たとえば  がロードされていない  や  が  な  、デフォルトのステータスを  したい  があります.この の「 」ノードデータは、データ の  のプロパティをバインドすることなく、ノードテンプレートを  するためによく  します.
  の  
カスタムノードテンプレートを  すると、 たちの はきれいになりますが、もっと  したいかもしれません.     がDon Meowが かにカータールのボスであることを してほしいかもしれません.したがって、リンクを  して、 ノード の  とノードを   に  するレイアウトを  することで、  な     を  します.
 たちのグラフにリンクを れるために、   にModelは  しません.Linksをサポートする の2つのモデルの1つをGoJSで  しなければなりません.これらはGraphLinksModelとTreeModelです.(   モデルの  を  ).
GraphLinksModelでは、model.linkDataArrayはmodel.nodeDataArrayを きます.JavaScriptオブジェクトの  が まれており、 JavaScriptオブジェクトは「to」ノードキーと「from」ノードキーを  してリンクを  します.これは、ノードAがノードBにリンクされ、ノードBがノードCにリンクされる です.var model = $（go.GraphLinksModel）; 
model.nodeDataArray = 
[ 
  { key：“ A” }，
  { key：“ B” }，
  { key：“ C” } 
]; 
model.linkDataArray = 
[ 
  { from：“A” ，to：“B” }，
  { from：“B” ，to：“C” } 
]; 
myDiagram.model =model;
  
TreeModelはGraphLinksModelより  ですが、 じノード の  のリンクや  の など、  のリンク  を  することはできません.  の   は  な  ツリー  であるため,この ではTreeModelを  する.
まず、TreeModelを  してより くのノードを  し、データにキーと を  することで、データを  します.var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
    });

// the template we defined earlier
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    { background: "#44CCFF" },
    $(go.Picture,
      { margin: 10, width: 50, height: 50, background: "red" },
      new go.Binding("source")),
    $(go.TextBlock, "Default Text",
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      new go.Binding("text", "name"))
  );

var model = $(go.TreeModel);
model.nodeDataArray =
[ // the "key" and "parent" property names are required,
  // but you can add whatever data properties you need for your app
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;
      
  
グラフレイアウト
ご のように、TreeModelはノードを   けるために  なLinksを   に  しますが、 が なのかを  するのは しいです.
 には、  のないすべてのノードを  して り て、グリッドに  するデフォルトのレイアウトがあります.このような  の  を  するために、 ノードに   に  を  することができますが、 たちの では、より  な   として、レイアウトを  して、   に  な  を  することができます.
  を  し、TreeModelを  しているので、 も  なレイアウトの  はTreeLayoutです.TreeLayoutのデフォルトは から に れるため、   では   な から に れるようにするには、angleプロパティを90に  します.
GoJSでレイアウトを うのは  です. レイアウトには、  に  を えるプロパティがたくさんあります. レイアウトには、TreeLayout Demoなどの があり、そのプロパティを します.//          
TreeLayout myDiagram.layout = 
  $（go.TreeLayout，
    { angle：90，layerSpacing：35 }）;
  
GoJSには にもいくつかのレイアウトがあり、  で むことができます.
これまで、 とモデルにレイアウトを  しましたが、  は のとおりです.var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
      layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
                { angle: 90, layerSpacing: 35 })
    });

// the template we defined earlier
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    { background: "#44CCFF" },
    $(go.Picture,
      { margin: 10, width: 50, height: 50, background: "red" },
      new go.Binding("source")),
    $(go.TextBlock, "Default Text",
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      new go.Binding("text", "name"))
  );

var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;
      
  
 たちのグラフは しい   のように えますが、リンクを じてもっとよくすることができます.
リンクテンプレート
 いBoxノードにより した しいLinkテンプレートを  します.1つの  は、ノードのようなものではなく、 なる  である.リンクの な  はリンクの  であり、GoJSによって  に  される  である  があります. たちのリンクはこのような  だけで  され、  のタッチよりも いタッチで、 ではなく い  です.デフォルトのリンクテンプレートとは なり、  はありません. に、[リンク](Link)routingのプロパティを[  ](Normals)から[  ](Orthogral)に  し、    を くするためにcornerの を えます.// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
  $(go.Link,
    // default routing is go.Link.Normal
    // default corner is 0
    { routing: go.Link.Orthogonal, corner: 5 },
    $(go.Shape, { strokeWidth: 3, stroke: "#555" }) // the link shape

    // if we wanted an arrowhead we would also add another Shape with toArrow defined:
    // $(go.Shape, { toArrow: "Standard", stroke: null }
    );
      
  
 たちのLinkテンプレートとNodeテンプレート、TreeModelとTreeLayoutを み わせて、 たちはやっと  な   を っています. に、  なコードを り します.   は のとおりです.var $ = go.GraphObject.make;

var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
      layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
                { angle: 90, layerSpacing: 35 })
    });

// the template we defined earlier
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    { background: "#44CCFF" },
    $(go.Picture,
      { margin: 10, width: 50, height: 50, background: "red" },
      new go.Binding("source")),
    $(go.TextBlock, "Default Text",
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      new go.Binding("text", "name"))
  );

// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.Orthogonal, corner: 5 },
    $(go.Shape, { strokeWidth: 3, stroke: "#555" })); // the link shape

var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;
  
  :https://gojs.net/latest/learn...
















                                    
                                    
                                    
                                    
                                

                                


                            

                            
                                    
                                        

                                        Linux Cネットワークプログラミング——1.大端数および小端数
                                

                                    Ajaxファイルの非同期アップロードを簡単に実現する方法