あなたは伝統的なJavaScriptコードでは一部のノードまたは他の種類を構築することができます。 GoJSはまた、より宣言的な方法を構築する手段を提供し、そしてコードに比べていくつかの利点を有します。
この記事では、基本的なオブジェクトタイプは、ノードを構築するために使用することができますについて説明します。これらのページは、明示的に作成し、ノードとリンクを追加することによって構築チャート。以下のページでは、モデルを使用するのではなく、チャートを構築するために、このようなコードを使用する方法を示します。
ノードとリンクの視覚的な構造
まず、チャートをチェックして、建物のノードのためのいくつかの例についてのコメントが含まれているとのGraphObjectリンク：
あなたが見ることができるように、ノードまたはリンクが可能、ネストされたパネルを含め、多くのGraphObjectで構成することができます。あなたはGraphObjectsを除いて、リンクの末尾にGraphObjectコメントがカバーするエリアが、リンク自体を見るために、コメントをドラッグすることができます。
コードで構築されました
GraphObjectはJavaScriptのオブジェクトの初期化と同様に、他のオブジェクトで構成することができます。それによって、よりGraphObjectsを示すGraphObject GraphObject Sを含むノードは、さらにS、ピクチャ、S、Sパネル形状のTextBlock Sとして含有していてもよいです。
非常に単純なノードは、ShapeとのTextBlockが含まれていてもよいです。あなたはこのようなビジュアルツリーのGraphObjectsを構築するために、次のコードを使用することができます。
VARノード=新しいgo.Node（go.Panel.Auto）。VaRの形状=新しいgo.Shape（）; shape.figure = "RoundedRectangle"。 shape.fill =「水色」。 node.add（形状）。VARのTextBlock =新しいgo.TextBlock（）; textblock.text = "こんにちは！"; textblock.margin = 5; node.add（テキストブロック）。 diagram.add（ノード）。
このように構成されているが、ノードが動作しますが、ノードがより複雑になると、コードが読み取られ、維持するために、より複雑になるであろう。幸い、GoJSがGraphObjectsから部品を作るためのより良い方法があります。
また、後半部分は自動的にノードとリンクを作成するために結合モデル、テンプレートとデータを使用する方法について説明します。これに先立ち、これらのページは、明示的にノードを作成し、図表に直接追加します。
GraphObject.make建物を使用します
GoJSはGraphObjectsを構築するとき、それは関係なく、一時的な変数やトラック名の、非常に便利です、静的関数GraphObject.makeを定義します。この静的関数は、ビジュアルツリーの深さについての手がかりを提供するためにインデントオブジェクトは、別の単純な線形コードは上に示した、ネストされたビルドをサポートしています。
GraphObject.makeは、その第一引数クラス型、GraphObjectの通常サブクラスである必要があり機能です。
他のパラメータGraphObject.makeは、以下のタイプを持っていることがあります。
属性/値のペアを持つ純粋なJavaScriptオブジェクト - オブジェクトに設定これらのプロパティ値を構築します
GraphObjectは、要素のように構成されているパネルに追加しました
単一の属性値の列挙定数GoJSの値は、許容されるようなオブジェクトは、値の設定であります
オブジェクトの文字列は、Shape.figure、Picture.source特性またはPanel.typeを設定するように構成されTextBlock.text
テーブルパネルトランペットの行または列を記述するためRowColumnDefinition、
JavaScriptの配列、複数のパラメータの関数から戻るときGraphObject.make、非常に便利なパラメータを保存
構築中のオブジェクトのための適切な方法で他の特定のオブジェクト
私たちは、まったく同じ結果を生成するために上記のgo.GraphObject.makeコードを書き換えることができます。
VAR $ = go.GraphObject.make。
diagram.add（
$（go.Node、go.Panel.Auto、
$（go.Shape、
{フィギュア： "RoundedRectangle"、塗りつぶし： "水色"}）、
$（go.TextBlock、
{テキスト： "こんにちは！" 、マージン：5}）
））。
この文字列引数を使用することによって簡素化することができます。
var $ = go.GraphObject.make;
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
$(go.TextBlock, "Hello!", { margin: 5 })
));
注意我们如何通过使用字符串值来设置Panel.type，Shape.figure和TextBlock.text属性。
使用$作为go.GraphObject.make的缩写是非常方便的，我们将从现在开始使用它。将go.GraphObject.make调用最小化为单个字符有助于消除代码中的混乱，并使缩进与正在构造的可视树中的GraphObject的嵌套匹配 。
其他一些JavaScript库自动将“$”定义为一个方便的类型函数名称，假设它们是唯一重要的库。但是，当然，你不能让同一个符号在同一范围内同时具有两种不同的含义。因此，您可能希望在使用GoJS时选择使用其他短名称，例如“$$”或“GO” 。该GoJS文档和示例使用“$”，因为它使生成的代码最清楚。
使用GraphObject.make的另一个好处是，它将确保您设置的任何属性都是类的定义属性。如果属性名称中有拼写错误，则会抛出错误，您可以在控制台日志中看到一条消息。
GraphObject.make也可用于构建除继承自GraphObject的GoJS类之外的GoJS类。下面是使用go.GraphObject.make构建Brush 而不是GraphObject子类的示例。
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
{ fill: $(go.Brush, "Linear",
{ 0.0: "Violet", 1.0: "Lavender" }) }),
$(go.TextBlock, "Hello!",
{ margin: 5 })
));
使用GraphObject.make构建Diagram也很常见。在这样的用法中，字符串参数（如果提供的话必须是第二个参数）将命名图应该使用的DIV HTML元素。等效地，您可以将对DIV元素的直接引用作为第二个参数传递。
此外，在图表上设置属性时，您可以使用属性名称，这些属性名称由两个以句点分隔的标识符组成。句点之前的名称用作图表或Diagram.toolManager上的属性名称，该图表返回要设置其属性的对象。句点后面的名称是设置的属性的名称。请注意，由于存在嵌入的句点，因此JavaScript属性语法要求您使用引号。
您还可以声明DiagramEvent听众，仿佛呼唤Diagram.addDiagramListener，假装设置图表属性，它实际上是一个DiagramEvent的名称。因为所有DiagramEvent都具有大写的名称，所以名称不会与任何Diagram属性名称冲突。
以下是GraphObject.make用于构建图表的适度广泛用法：
var myDiagram =
$(go.Diagram, "myDiagramDiv", // must name or refer to the DIV HTML element
{
// don't initialize some properties until after a new model has been loaded
"InitialLayoutCompleted": loadDiagramProperties, // a DiagramEvent listener
// have mouse wheel events zoom in and out instead of scroll up and down
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
// specify a data object to copy for each new Node that is created by clicking
"clickCreatingTool.archetypeNodeData": { text: "new node" }
});
// the DiagramEvent listener for "InitialLayoutCompleted"
function loadDiagramProperties(e) { . . . }
GraphObject.makeは、これらすべての初期化がまだJavaScriptのコードで行って使用してください、私たちは、このようなブラシなどのオブジェクトを関数を呼び出して簡単に共有できます。
VAR violetbrush = $（go.Brush、 "線形"、{0.0： "バイオレット"、1.0： "ラベンダー"}）。
diagram.add（
$（go.Node、 "オート"、
$（go.Shapeは、 "RoundedRectangle"は、
{記入：violetbrushを}）、
$（go.TextBlock、 "こんにちは！"、
{マージン：5}）
））;
diagram.add（
$（go.Node、 "オート"、
$（go.Shape、 "楕円"、
{記入：violetbrushを}）、
$（go.TextBlock、 "さようなら！"、
{マージン：5}）
））;
ブラシESとジオメトリオブジェクトを共有することができますが、GraphObjectを共有することはできません。