gojs 官网api翻译
GOJS中文文档API
介绍
GoJS图表组件介绍
GoJS是一个JavaScript库，可以让您轻松地在现代Web浏览器中创建交互式图表。GoJS支持图形模板和图形对象属性的数据绑定来建模数据。您只需要保存和恢复模型，由简单的JavaScript对象组成，这些对象包含应用程序需要的任何属性。许多预定义的工具和命令实现了大多数图表所需的标准行为。外观和行为的自定义大概是设置中最重要的问题。
一个简单的GoJS图
//为了简洁。请参阅“Building Parts”介绍页面了解更多信息
var $ =go.GraphObject.make;
//the node template describes how eachNode should be constructed
//节点模板描述如何构建每个节点
diagram.nodeTemplate =
$(go.Node, "Auto", //形状自动填充适合
$(go.Shape, "RoundedRectangle", // use this kind of figure for the Shape
// bind Shape.fillto Node.data.color
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 3 }, // some room around the text
// bindTextBlock.text to Node.data.key
new go.Binding("text", "key"))
);
// the Model holds only the essentialinformation describing the diagram
diagram.model = newgo.GraphLinksModel(
[ // a JavaScriptArray of JavaScript objects, one per node;
// the"color" property is added specifically for this app
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[ // a JavaScriptArray of JavaScript objects, one per link
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
diagram.initialContentAlignment =go.Spot.Center;
// enable Ctrl-Zto undo and Ctrl-Y to redo
diagram.undoManager.isEnabled = true;
您可以通过多种方式与此图进行交互：
您可以点击选择一个零件。选定的节点用围绕该节点的蓝色矩形的装饰物突出显示。选中的链接在链接路径后面用蓝线突出显示。
可以一次选择多个零件。单击添加到选择时按住Shift键。单击以切换是否选择该部件时，请按住Ctrl键。
另一种多选的方法是在背景中的一个点（不是在一个零件上）下滑鼠标，稍等片刻，然后拖动一个框。当鼠标移动时，框中的部件被选中。 Shift和Control修饰符也可以工作。
Ctrl-A选择图表中的所有部分。
通过选择并拖动来移动一个或多个节点。
复制选定的部分与复制/粘贴（Ctrl-C / Ctrl-V）或Ctrl-鼠标拖动一起工作。
用Delete键删除选定的部分。
如果滚动条是可见的，或者如果整个部分的集合小于图表的可见区域（“视口”），则可以在没有拖动的情况下在背景中（而不是在零件上）用鼠标悬停来平移图表等候。
使用鼠标滚轮上下滚动，按住Shift键鼠标左右滚动。 Ctrl-鼠标滚轮放大和缩小。
您也可以用手指在触摸设备上平移，缩放，选择，复制，移动，删除，撤消和重做。大多数可以从键盘调用的命令都可以从默认的上下文菜单中调用，通过按下你的手指并使其一动不动。
文档中所有示例的独特之处在于它们都是“活”的 - 没有截图！它们是由所示源代码实现的实际图。你可以与他们互动 - 有些甚至显示动画。
GoJS概念
图由零件组成：可以通过链接连接的节点，可以将它们组合成组。所有这些部分在图层中聚集在一起，并按照布局排列。
每个图都有一个模型，用于保存和解释您的应用程序数据，以确定节点到节点的链接关系和组成员关系。大多数部分是数据绑定到您的应用程序数据。该图自动为模型的Model.nodeDataArray中的每个数据项创建节点或组，并为模型的GraphLinksModel.linkDataArray中的每个数据项创建一个链接。您可以将所需的任何属性添加到每个数据对象，但是每种模型都只需要一些属性。
每个节点或链接通常由声明其外观和行为的模板定义。每个模板由GraphObject的面板组成，例如TextBlocks或Shapes。所有部件都有默认的模板，但几乎所有的应用程序都会指定自定义模板，以达到所需的外观和行为。 GraphObject属性与模型数据属性的数据绑定使每个节点或链接对数据都是唯一的。
节点可以手动定位（交互式或编程），也可以由Diagram.layout和每个Group.layout自动安排。节点由其左上角的点（GraphObject.position）定位，或由节点中的程序员定义的点（Part.location和Part.locationSpot）定位。
工具处理鼠标和键盘事件。每个图表都有许多工具执行交互式任务，例如选择零件或拖动它们或在两个节点之间绘制新的链接。 ToolManager根据鼠标事件和当前情况确定应该运行哪个工具。
每个图也有一个CommandHandler实现各种命令，如删除或复制。当ToolManager运行时，CommandHandler解释键盘事件，例如control-Z。
该图提供了滚动图的各个部分并放大或缩小的功能。该图还包含所有的图层，这些图层又包含所有的部分（节点和链接）。部分依次由可能嵌套的文本，形状和图像组成。内存中的JavaScript对象层次结构形成了图表可以绘制的所有内容的“可视化树”。
Overview类允许用户查看整个模型并控制该图显示的部分。 Palette类包含用户可以拖放到图表中的部分。
您可以选择图中的一个或多个部分。选择模板时，模板实现可能会改变节点或链接的外观。该图还可以添加Adornments以指示选择并支持诸如调整节点大小或重新链接链接等工具。装饰也是如何实现工具提示和上下文菜单。
图表，图形对象，模型或模型数据状态的所有程序性改变都应在每个用户操作的单个事务中执行，以确保正确更新并支持撤销/重做。所有预定义的工具和命令都执行事务，所以如果启用了UndoManager，则每个用户操作都可以自动撤销。 Diagrams上的DiagramEvents以及Diagrams和GraphObjects上的事件处理程序都会记录它们是否在事务中引发，或者是否需要执行事务以更改模型或图表。
一个最简单的例子
<divid="myDiagramDiv"style="border:solid 1px blue; width:400px; height:150px">div>
<script>
var diagram = new go.Diagram("myDiagramDiv");
diagram.model = newgo.GraphLinksModel(
[{ key: "Hello" }, // two node data, in an Array
{ key: "World!" }],
[{ from: "Hello", to: "World!"}] // one link data, in an Array
);
script>
使用GraphObjects创建组件
您可以使用传统的JavaScript代码构建Node或其他类型的部分。 GoJS还提供了一个更具说明性的构建组成部分的方式，它比代码有几个优点。
以下几页将讨论可用于构建节点的基本类型的对象。这些页面通过明确创建和添加Node和Links来构建图表。后面的页面将显示如何使用模型构建图表，而不是使用此类代码。
节点和链接的可视化结构
首先，查看包含关于用于构建一些示例节点和链接的GraphObjects的注释的图表：
正如你所看到的，一个Node或links可以由许多GraphObjects组成，包括可能嵌套的Panel。除了links本身内的GraphObjects之外，您可以拖动任何注释以查看注释链接的GraphObject对象。（红字可拖动）
用代码构建
GraphObject是一个JavaScript对象，可以像任何其他对象一样构造和初始化。 Node是一个GraphObject，它包含GraphObjects，如TextBlocks，Shapes，Pictures和Panels，它们可能包含更多的GraphObjects。
一个非常简单的Node由一个Shape和一个TextBlock组成。您可以使用如下代码构建GraphObjects的这种可视化树：
var node = new go.Node(go.Panel.Auto);
var shape = new go.Shape();
shape.figure = "RoundedRectangle";
shape.fill = "lightblue";
node.add(shape);
var textblock = new go.TextBlock();
textblock.text = "Hello!";
textblock.margin = 5;
node.add(textblock);
diagram.add(node);
此代码生成以下图表。这是一个“活的”图，而不是截图图像，所以你可以点击节点来选择它，然后拖动它。
（蓝色框可拖动）
尽管以这种方式构建节点是可行的，但随着节点变得越来越复杂，代码将变得更加复杂，难以阅读和维护。不过，GoJS有更好的方式来建立出GraphObjects的组成部分。
此外，后面的部分将讨论如何使用Model，Template和data-binding自动创建Node和Links。
用GraphObject.make构建
GoJS定义了一个静态函数GraphObject.make，它在构建GraphObjects时非常有用，而不必考虑并追踪临时变量名称。这个静态函数还支持以嵌套的方式构建对象，缩进提供了关于可视化树中深度的线索，与上面显示的简单线性代码不同。
GraphObject.make是一个函数，其第一个参数必须是类类型，通常是GraphObject的子类。
GraphObject.make的 其他参数可能有以下几种类型：
- 一个带有属性/值对的普通JavaScript对象 - 这些属性值在被构造的对象上设置
- 一个GraphObject，作为一个元素添加到正在构建的Panel中
- 一个GoJS枚举值常量，用作可以接受这个值的被构造对象的唯一属性的值
- 一个字符串，它设置正在构建的对象的TextBlock.text，Shape.figure，Picture.source或Panel.type属性
- 一个RowColumnDefinition（行列定义），用于描述Table Panel中的行或列
- 一个JavaScript数组，持有参数GraphObject.make，从函数返回多个参数时很有用
- 其他专门的对象，以正确的方式用于构造对象
我们可以用go.GraphObject.make重写上面的代码，以产生完全相同的结果：
注意：$太敏感！为避免与jQuery冲突，应使用不同的声明符：
var objGo = go.GraphObject.make;
var $ = go.GraphObject.make;
diagram.add(
$(go.Node, go.Panel.Auto,
$(go.Shape,
{ figure: "RoundedRectangle",
fill: "lightblue" }),
$(go.TextBlock,
{ text: "Hello!",
margin: 5 })
));
这可以通过使用字符串参数来简化一下：
var $ = go.GraphObject.make;
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
$(go.TextBlock, "Hello!", { margin: 5 })
));
GraphObject.make也可以用来构建除了从GraphObject继承的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来构建图也是很常见的。在这样的用法中，一个字符串参数（如果提供的话必须是第二个参数）将命名该图应该使用的DIV HTML元素。等价地，您可以传递对DIV元素的直接引用作为第二个参数。
另外，在图上设置属性时，可以使用属性名称，这些属性名称是由用句点分隔的两个标识符组成的字符串。句点之前的名称用作图表上的属性的名称，或者用作返回要设置其属性的对象的Diagram.toolManager。句号之后的名称是设置的属性的名称。请注意，由于存在嵌入期间，因此JavaScript属性语法要求使用引号。
您也可以声明DiagramEvent侦听器，就好像调用Diagram.addDiagramListener一样，假装设置一个Diagram属性，该属性实际上是一个DiagramEvent的名称。因为所有的DiagramEvent都有大写的名字，所以这些名字不会和任何图表属性名称冲突。
下面是GraphObject.make用于构建图表的适度广泛的用法：
var myDiagram =
$(go.Diagram, "myDiagramDiv", //必须命名或引用DIV HTML元素
{
//任何初始图都集中在视口中
initialContentAlignment: go.Spot.Center,
//在加载新模型之前，不要初始化一些属性
"InitialLayoutCompleted":loadDiagramProperties, //一个DiagramEvent侦听器
//有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
//指定要通过单击创建的每个新节点复制的数据对象
"clickCreatingTool.archetypeNodeData": { text: "newnode" }
});
//“InitialLayoutCompleted”的DiagramEvent侦听器
functionloadDiagramProperties(e) { . . . }
所有使用GraphObject.make的初始化仍然是JavaScript代码，所以我们可以调用函数并轻松共享对象，例如画笔：
var violetbrush =$(go.Brush, "Linear", { 0.0: "Violet", 1.0: "Lavender" });
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
{ fill: violetbrush }),
$(go.TextBlock, "Hello!",
{ margin: 5 })
));
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "Ellipse",
{ fill: violetbrush }),
$(go.TextBlock, "Goodbye!",
{ margin: 5 })
));
笔刷和几何对象可能是共享的，但GraphObject可能不被共享。
文本块
设置TextBlock.text属性是显示文本字符串的唯一方法。由于TextBlock继承自GraphObject，一些GraphObject属性将影响文本。但是，还有关于如何格式化和绘制文本的附加文本选项。
在这些简单的演示中，代码以编程方式创建一个Part并将其添加到Diagram中。一旦你了解了模型和数据绑定，你通常不会以编程方式创建组成部分（Node或Links）。
字体和颜色
文本的大小和风格外观由TextBlock.font指定。该值可以是任何CSS字体说明符字符串。
文本是使用TextBlock.stroke画笔绘制的。该值可以是任何CSS颜色字符串或画笔。默认情况下，笔画是“黑色”。
您还可以指定用作背景的笔刷：GraphObject.background。默认情况下，根本没有画笔，这会导致背景透明。背景总是矩形的。
diagram.add(
$(go.Part, "Vertical",
$(go.TextBlock, { text: "a TextBlock" }),
$(go.TextBlock, { text: "a TextBlock", stroke: "red" }),
$(go.TextBlock, { text: "a TextBlock", background: "lightblue" }),
$(go.TextBlock, { text: "a TextBlock", font: "bold 14pt serif" })
));
尺寸和裁剪
默认的TextBlock仅仅刚好够默认的文字显示，但是TextBlock 可以随意变大或缩小。较大的尺寸会导致没有文字的区域; 较小的尺寸会导致文字画面受到裁剪。
下面的例子从一个默认大小的TextBlock开始，然后将显示大小减小。为了更好地展示下面的TextBlocks的实际大小，我们给了它们浅绿色的背景。
diagram.add(
$(go.Part, "Vertical",
$(go.TextBlock, { text: "a TextBlock", background: "lightgreen", margin: 2 }),
$(go.TextBlock, { text: "a TextBlock", background: "lightgreen", margin: 2,
width: 100, height: 33 }),
$(go.TextBlock, { text: "a TextBlock", background: "lightgreen", margin: 2,
width: 60, height: 33 }),
$(go.TextBlock, { text: "a TextBlock", background: "lightgreen", margin: 2,
width: 50, height: 22 }),
$(go.TextBlock, { text: "a TextBlock", background: "lightgreen", margin: 2,
width: 40, height: 9 })
));
TextBlocks的自然大小因浏览器而异
由于不同的浏览器以不同的方式测量画布文本，因此TextBlocks是GoJS中唯一可能在浏览器或不同设备之间具有不一致的自然尺寸的对象。因此，如果您需要在所有浏览器中精确一致地测量对象，则不应使用没有显式大小（TextObject.desiredSize）的TextBlocks来指定任何对象的大小（即，一个TextBlock如果没有明确大小，不能成为一个Panel.Auto类型的主要组成部分）。
包装
文本也可以自动包装到其他行中。为了实现包装，TextBlock.wrap属性不能是None，并且宽度必须有一些约束：比默认要窄。
在下面的例子中，第一个TextBlock得到它的默认尺寸，第二个被限制在50宽，但不允许包装，其他的例子被限制在相同的宽度，但是被允许包装。
diagram.add(
$(go.Part, "Vertical",
$(go.TextBlock, { text:"a Text Block", background: "lightgreen", margin: 2}),
$(go.TextBlock, { text:"a Text Block", background: "lightgreen", margin: 2,
width: 50, wrap: go.TextBlock.None }),
$(go.TextBlock, { text:"a Text Block", background: "lightgreen", margin: 2,
width: 50, wrap: go.TextBlock.WrapDesiredSize }),
$(go.TextBlock, { text:"a Text Block", background: "lightgreen", margin: 2,
width: 50, wrap: go.TextBlock.WrapFit })
));
文本对齐
TextBlock.textAlign属性指定在TextBlock的大小内水平绘制字符的位置。 该值必须是一个CSS字符串。
这与GraphObject.alignment属性不同，后者控制将对象放置在由父面板分配的区域内的位置。
（加上defaultStretch: go.GraphObject.Horizontal 之后绿色框变成父类长度，文字会在框内居中或对齐。默认不加货没有这个属性：defaultStretch: go.GraphObject.None绿色框为文字长度。文字会在150宽度之内变动对齐）
diagram.add(
$(go.Part, "Horizontal",
$(go.Panel, "Vertical",
{ width:150, defaultStretch: go.GraphObject.Horizontal },
$(go.TextBlock, { text:"textAlign: 'left'", background: "lightgreen", margin: 2,
textAlign: "left"}),
$(go.TextBlock, { text:"textAlign: 'center'", background: "lightgreen", margin: 2,
textAlign: "center"}),
$(go.TextBlock, { text:"textAlign: 'right'", background: "lightgreen", margin: 2,
textAlign: "right"})
),
$(go.Panel, "Vertical",
{ width:150, defaultStretch: go.GraphObject.None },
$(go.TextBlock, { text:"alignment: Left", background: "lightgreen", margin: 2,
alignment: go.Spot.Left }),
$(go.TextBlock, { text:"alignment: Center", background: "lightgreen", margin: 2,
alignment: go.Spot.Center }),
$(go.TextBlock, { text:"alignment: Right", background: "lightgreen", margin: 2,
alignment: go.Spot.Right })
)
));
TextBlock.verticalAlignment属性控制边界内字形的垂直对齐。 TextBlock.textAlign和TextBlock.verticalAlignment都不影响TextBlock的大小。
diagram.add(
$(go.Part, "Horizontal",
$(go.TextBlock, { text:"verticalAlignment: Top", verticalAlignment: go.Spot.Top,
width: 170, height: 60, background: "lightgreen", margin: 10}),
$(go.TextBlock, { text:"verticalAlignment: Center", verticalAlignment: go.Spot.Center,
width: 170, height: 60, background: "lightgreen", margin: 10}),
$(go.TextBlock, { text:"verticalAlignment: Bottom", verticalAlignment: go.Spot.Bottom,
width: 170, height: 60, background: "lightgreen", margin: 10}) ));
TextAlign 和Multiline 或 Wrapping
即使TextBlock具有其默认大小，TextBlock.textAlign属性也是有用的。这种情况发生在文本占用多行时，无论是嵌入换行符，还是换行。您可以通过设置TextBlock.isMultiline来控制是否忽略以第一个换行符开始的文本。默认情况下，多行和换行都是启用的。
diagram.add(
$(go.Part, "Vertical",
$(go.TextBlock, { text:"a Text Block\nwith three logical lines\nof text",
background: "lightgreen", margin: 2,
isMultiline: false }),
$(go.TextBlock, { text:"a Text Block\nwith three logical lines\nof text",
background: "lightgreen", margin: 2,
isMultiline: true }),
$(go.TextBlock, { text:"a Text Block\nwith three logical lines\nof centered text",
background: "lightgreen", margin: 2,
isMultiline: true, textAlign: "center"}),
$(go.TextBlock, { text:"a single line of centered text that should" +
" wrap because we will limit the width",
background: "lightgreen", margin: 2, width: 80,
wrap: go.TextBlock.WrapFit, textAlign: "center"})
));
第一个和第二个文本快区别在于isMultiline设置的开关。
第二个和第三个文本块区别在于textAlign设置的对齐方式。
编辑
GoJS还支持用户就地编辑文本。您只需将TextBlock.editable属性设置为true即可。
如果要提供用户输入的文本验证，可以将TextBlock.textValidation属性设置为一个函数。您还可以通过设置TextBlock.textEditor属性来提供更加自定义或复杂的文本编辑器。验证介绍页面上有一个文本验证示例。
diagram.add(
$(go.Part,
$(go.TextBlock,
{ text: "select and then click to edit",
background: "lightblue",
editable: true, isMultiline: false })
));
diagram.add(
$(go.Part,
$(go.TextBlock,
{ text: "this one allows embedded newlines",
background: "lightblue",
editable: true })
));
下图中，双击编辑第一个方块中的文本时，不能进行换行。而编辑第二个文本块时可以进行换行。
形状
使用Shape类来绘制几何图形。您可以控制绘制什么样的形状，以及如何绘制和填充。
形状类和文本块类和图片类一样，都是最基本的对象。他们不能再包含任何对象。所以形状类不能绘制文本和图片。
图形
您可以将Shape.figure属性设置为通常命名的各种形状。使用GraphObject.make时，可以将图形名称作为字符串参数传递。您可能还需要设置GraphObject.desiredSize或GraphObject.width和GraphObject.height属性，虽然通过面板确定的形状也是常见的。
您可以在形状（https://gojs.net/latest/samples/shapes.html）示例中看到所有命名的几何图形 。一些最常用的数字是在GoJS库中预定义的。但是大多数数字在extensions目录下的Figures.js文件中定义。
diagram.add(
$(go.Part, "Horizontal",
$(go.Shape, "Rectangle",
{ width: 40, height: 60, margin: 4, fill: null }),
$(go.Shape, "RoundedRectangle",
{ width: 40, height: 60, margin: 4, fill: null }),
$(go.Shape, "Ellipse",
{ width: 40, height: 60, margin: 4, fill: null }),
$(go.Shape, "Triangle",
{ width: 40, height: 60, margin: 4, fill: null }),
$(go.Shape, "Diamond",
{ width: 40, height: 60, margin: 4, fill: null })
));
填充和笔划
在go.Shape声明中的大括号中的属性：
Shape.stroke：描边。
Shape.fill：填充。
Shape.strokeWidth：描边宽度。
Shape. Background：背景色。
diagram.add(
$(go.Part, "Horizontal",
$(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4
}), // default fill and stroke are "black"
$(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,
fill: "green" }),
$(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,
fill: "green", stroke: null }),
$(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,
fill: null, stroke: "green" }),
$(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,
fill: null, stroke: "green", strokeWidth: 3 }),
$(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,
fill: null, stroke: "green", strokeWidth: 6 }),
$(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,
fill: "green", background: "orange" })
));
表格组件和填充
以下演示的是放在table中的一个组件。声明表格组件时需要将”Table”声明在go.Part后。然后在各个基本元素内部大括号中填写row和column属性。
diagram.div.style.background = "lightgray";
diagram.add(
$(go.Part, "Table",
$(go.Shape, { row: 0, column: 0, figure: "Club", width: 60, height: 60, margin: 4,
fill: "green" }),
$(go.TextBlock, "green", { row: 1, column: 0 }),
$(go.Shape, { row: 0, column: 1, figure: "Club", width: 60, height: 60, margin: 4,
fill: "white" }),
$(go.TextBlock, "white", { row: 1, column: 1 }),
$(go.Shape, { row: 0, column: 2, figure: "Club", width: 60, height: 60, margin: 4,
fill: "transparent" }),
$(go.TextBlock, "transparent", { row: 1, column: 2 }),
$(go.Shape, { row: 0, column: 3, figure: "Club", width: 60, height: 60, margin: 4,
fill: null }),
$(go.TextBlock, "null", { row: 1, column: 3 })
));
第三个和第四个图形中的fill 中填写的文本不一样。第三个填写的是transparent（透明）。单机图形内部时会触发选中整个蓝色框。但是第四个fill中填的是null。单击事件选不中整个组件。
几何（Geometry）
每一个Shape类都从它所使用的Geometry类中获得它的“形状”。 Geometry类保存的是由点连接成线的图形的描述。设置Shape.figure使用可以参数化的命名预定义几何。一般来说，给Shape一个几何是最高效的，而不是给它一个图形。
如果您需要与GoJS中的所有预定义图形不同的图形，您可以构建自己的几何体并设置Shape.geometry。构建自己的几何体的一种方法是通过PathSegments组成的PathFigures构建。
更为方便的创建几何图形是调用go.Geometry.parse来读取坐标，通过坐标连线成图形。（原著：但是创建常量几何的更简单的方法是调用Geometry.parse来读取具有几何定义路径表达式的字符串，或者将Shape.geometryString设置为这样的字符串。这些表达式具有移动虚拟“笔”的命令。几何路径的语法记录在几何路径字符串页面中）
这个例子创建了一个看起来像字母“W”的几何图形，并在具有不同笔画特征的几个Shape对象中使用它。几何对象可以由多个Shape共享。请注意，可能不需要指定GraphObject.desiredSize或GraphObject.width和GraphObject.height，因为几何定义了其自己的大小。如果设置了尺寸或者其所包含的panel中设置了大小，则有效几何体由Shape.geometryStretch属性决定。根据geometryStretch属性的值，这可能会导致额外的空白或图形被减掉。
//创建了一个几何对象。该对象由开始点和路径点，是否填充组合而成。
var W_geometry = go.Geometry.parse("M 0,0 L 10,50 20,10 30,50 40,0", false);
diagram.add(
$(go.Part, "Horizontal",
$(go.Shape, { geometry: W_geometry, strokeWidth: 2 }),
$(go.Shape, { geometry: W_geometry, stroke: "blue", strokeWidth: 10,
strokeJoin: "miter", strokeCap: "butt" }),
$(go.Shape, { geometry: W_geometry, stroke: "blue", strokeWidth: 10,
strokeJoin: "miter", strokeCap: "round" }),
$(go.Shape, { geometry: W_geometry, stroke: "blue", strokeWidth: 10,
strokeJoin: "miter", strokeCap: "square" }),
$(go.Shape, { geometry: W_geometry, stroke: "green", strokeWidth: 10,
strokeJoin: "bevel", strokeCap: "butt" }),
$(go.Shape, { geometry: W_geometry, stroke: "green", strokeWidth: 10,
strokeJoin: "bevel", strokeCap: "round" }),
$(go.Shape, { geometry: W_geometry, stroke: "green", strokeWidth: 10,
strokeJoin: "bevel", strokeCap: "square" }),
$(go.Shape, { geometry: W_geometry, stroke: "red", strokeWidth: 10,
strokeJoin: "round", strokeCap: "butt" }),
$(go.Shape, { geometry: W_geometry, stroke: "red", strokeWidth: 10,
strokeJoin: "round", strokeCap: "round" }),
$(go.Shape, { geometry: W_geometry, stroke: "red", strokeWidth: 10,
strokeJoin: "round", strokeCap: "square" }),
$(go.Shape, { geometry: W_geometry, stroke: "purple", strokeWidth: 2,
strokeDashArray: [4, 2] }),
$(go.Shape, { geometry: W_geometry, stroke: "purple", strokeWidth: 2,
strokeDashArray: [6, 6, 2, 2] })
));
角度和比例
自定义数字
Panels
Panels是将其他GraphObjects作为其元素的GraphObjects。一个Panel指定了其所包含元素的大小和位置。每个Panel有自己的坐标系统。Panel中的元素根据绘画顺序来确定zindex的顺序。
尽管只有一个Panel类，但是他派生出很多不同的Panel。每个Panel都有不同的方式进行排列内部元素。当你构造一个Panel时你必须使用一个 Panel.type类进行构造函数。以下是几个Panel类：
· Panel.Position
· Panel.Vertical
· Panel.Horizontal
· Panel.Auto
· Panel.Spot
· Panel.Table (seethe next section about Table Panels)
· Panel.Viewbox
· Panel.Link (seethe section about Link Labels)
· Panel.Grid (seethe section about Grid Patterns)
· Panel.Graduated (seethe section about Graduated Panels)
注意，只能将Node和links元素加入Diagram中。Part不能作为Panel中的元素。但是所有的Parts都是Panels类。因为Part类继承了Panel类。Parts类是最高级别的Panel类。因此这些例子使用Parts作为最高级别的对象，因此在Node中你可以使用panel类而不是part类。
（原著：还要注意，只能将PART（即节点和链接）添加到图中，并且PART不能是PANEL的元素。但是所有PART都是PANEL，因为PART类继承PANEL-- PART基本上都是“顶级”PANEL。因此，这些示例使用PART作为顶级对象，而在Node内，您将使用PANEL而不是PART。）
Position Panels
Template Maps
上面的很多例子都提供了自定义的节点、分组和连线模板。这些示例展示了如何通过数据绑定对特定数据实例的模板进行简单的修改。但是，如果你想在同一个图中有不同形状或动作的节点时应怎么做？
可以定义一个节点模板，该模板包含您要显示的所有类型的节点的所有可能的配置。 需要大量的数据绑定和代码才能做出所需的更改。 通常，您不会希望使用GraphObject.visible模板的大部分来显示您想要显示的一个面板。 这种技术很难使用 - 模板太复杂太快了。
GoJS支持尽可能多的模板，你可以动态地选择你想用来表示特定节点数据的模板。这确实意味着可能有很多模板，但是每个模板都会更简单，更容易编写，并且更易于维护。
每个Diagram都保存着一个模板的map，存放的有node，group和link。每个map都通过"category"和模板进行关联。例如，当图想要为特定节点数据对象创建节点时，该图使用该节点数据的"category"在Diagram.nodeTemplateMap中查找节点模板。 同理，Diagram.groupTemplateMap和Diagram.linkTemplateMap也一样。
每个Diagram最初都有自己的模板地图与预定义的类别。任何数据对象的默认"category"都是空字符串“”。因此，Diagram.nodeTemplateMap最初包含一个非常简单的Node模板，它包含一个TextBlock，其TextBlock.text属性是绑定到转换为字符串的数据的数据。您可以在前面的许多示例中看到节点，组和链接的默认模板，例如Groups示例中和Links示例中。
Diagram.nodeTemplate的值是Diagram.nodeTemplateMap.getValue（“”）的值。设置Diagram.nodeTemplate只是替换名为空字符串的Diagram.nodeTemplateMap中的模板。
一个模板map的例子
// the "simple" template just shows the key string and the color in the background,
// but it also includes a tooltip that shows the description
var simpletemplate =
$(go.Node, "Auto",
$(go.Shape, "Ellipse",
new go.Binding("fill", "color")),
$(go.TextBlock,
new go.Binding("text", "key")),
{
toolTip:
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "desc"))
)
}
);
// the "detailed" template shows all of the information in a Table Panel
var detailtemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
new go.Binding("fill", "color")),
$(go.Panel, "Table",
{ defaultAlignment: go.Spot.Left },
$(go.TextBlock, { row: 0, column: 0, columnSpan: 2, font: "bold 12pt sans-serif" },
new go.Binding("text", "key")),
$(go.TextBlock, { row: 1, column: 0 }, "Description:"),
$(go.TextBlock, { row: 1, column: 1 }, new go.Binding("text", "desc")),
$(go.TextBlock, { row: 2, column: 0 }, "Color:"),
$(go.TextBlock, { row: 2, column: 1 }, new go.Binding("text", "color"))
)
);
// 创建了TemplateMap。里面含有三个键值对
var templmap = new go.Map("string", go.Node);
templmap.add("simple", simpletemplate);
templmap.add("detailed", detailtemplate);
templmap.add("", diagram.nodeTemplate);
//重点。当创建map后，将map和画布进行绑定
diagram.nodeTemplateMap = templmap;
diagram.model.nodeDataArray = [
{ key: "Alpha", desc: "first letter", color: "green" }, // uses default category: ""
{ key: "Beta", desc: "second letter", color: "lightblue", category: "simple" },
{ key: "Gamma", desc: "third letter", color: "pink", category: "detailed" },
{ key: "Delta", desc: "fourth letter", color: "cyan", category: "detailed" }
];
Data Binding 数据绑定
数据绑定是一种从源对象中提取值并在目标对象上设置属性的方法。 目标对象通常是GraphObjects;源对象通常是保存在模型中的JavaScript数据对象。
你可以进行编写一段从model中获取你想要的数据的代码。在改GraphObjects对象中搜寻相符的part，在该part中的可视化tree中搜寻目标GraphObjects，然后用这些值设置在GraphObjects中设置1个或多个属性。但是数据绑定提供声明的形式只是通过提供绑定到指定这样的行为名称源对象和目标对象的属性。（However data binding offers a declarative way to specify suchbehavior just by supplying a Binding that names the properties on the sourceobject and on the target object.）
试图绑定GraphObject的不存在的属性可能会导致一个警告或错误，您可以在控制台日志中看到。总是检查控制台日志中是否有任何通常由绑定系统禁止的潜在异常。
Parts和DataBinding（数据绑定）的关系
首先请看下面的画布，包含了GraphObjects经常使用的一些示例node和links的一些注释。
图中，有两个node和一个link，在左侧，带有阴影。TreeModel和两个数据对象在Model.nodeDataArray中，在右侧，呈灰色。
每个node和link都有一个Panel.data属性，是引用数据对象。因此，你可以很轻松的去将已经放在model中的data映射到一个节点中的data属性中。如上图中的灰色连线一样。
每个节点也有三个数据绑定，用绿色虚线画出：
·连接到Part.location属性的data.location属性
·连接到Shape.fill属性的data.color属性
·连接到TextBlock.text属性的data.text属性
templates和数据绑定的使用极大地简化了必须存储在model data中的信息，并且从modelData独立时，灵活的以各种方式表示节点和链接。但是并不是所有的数据属性都需要在模板的绑定中使用。
请注意，绑定不是指从data到任何Part的映引用。从图表中分离模型的全部要点是避免数据引用到Diagrams、Nodes、Links或Tools。从diagram到model的唯一引用是Diagram.model属性和每个节点或链接的Panel.data属性。
绑定字符串和数字属性
将GraphObject属性数据绑定到数据属性很容易。在这个例子中，我们不仅将TextBlock.text和Shape.fill绑定到节点数据的属性值，对于较粗的彩色线条，我们也绑定了Shape.stroke和Shape.strokeWidthlink到链接数据的属性值中。
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
{ fill: "white" },
new go.Binding("fill", "color")), // shape.fill = data.color
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key")) // textblock.text = data.key
);
diagram.linkTemplate =
$(go.Link,
$(go.Shape,
new go.Binding("stroke", "color"), // shape.stroke = data.color
new go.Binding("strokeWidth", "thick")), // shape.strokeWidth = data.thick
$(go.Shape,
{ toArrow: "OpenTriangle", fill: null },
new go.Binding("stroke", "color"), // shape.stroke = data.color
new go.Binding("strokeWidth", "thick")) // shape.strokeWidth = data.thick
);
var nodeDataArray = [
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "pink" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta", color: "blue", thick: 2 }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
请注意，上图中有两个color属性的绑定使用。一个是表示箭头体的颜色，一个是表示箭头头的颜色。
请记住，没有Node.key属性。但是Node的key可以通过someNode.data.key访问。
绑定对象属性。例如Part.location
当数据绑定时，你也可以将一个对象绑定到一个属性中。 例如，数据绑定Part.location属性是很常见的。
Part.location的值是一个Point类，所以在这个例子中，nodeDataArray中loc的值必须是Point类。（Point类：一个有x，y两个属性的对象。用newgo.Point()初始化）
diagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc"), // get the Node.location from the data.loc value
$(go.Shape, "RoundedRectangle",
{ fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
);
var nodeDataArray = [
// for each node specify the location using Point values
{ key: "Alpha", color: "lightblue", loc: new go.Point(0, 0) },
{ key: "Beta", color: "pink", loc: new go.Point(100, 50) }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
为了简洁起见，这些例子的其余部分使用默认的Diagram.linkTemplate。
转换函数
Point类包含一个静态函数Point.parse，你可以使用它将字符串转换成Point对象。当初始化时，它需要两个数字以字符串的形式进行输入，分别代表Point.x和Point.y值。它用这些值返回一个Point对象。您可以将一个转换函数作为第三个参数传递给Binding构造函数。用法：go.Point.parse。这允许位置属性以字符串（“100 50”）的形式指定，而不是new一个Point对象。
diagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse), // convert string into a Point value
$(go.Shape, "RoundedRectangle",
{ fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
);
var nodeDataArray = [
{ key: "Alpha", color: "lightblue", loc: "0 0" }, // note string values for location
{ key: "Beta", color: "pink", loc: "100 50" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
转换函数可以被命名，也可以是匿名函数。函数获取一个data属性值并返回一个合适的值进行设置。他们能随意使用。
这里有一个例子，shape中的几个属性都绑定了名为highlight的属性，通过highlight属性的布尔类型值，都用每个各自的方法去显示返回各自函数的值。
diagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse),
$(go.Shape, "RoundedRectangle",
{ // default values if the data.highlight is undefined:
fill: "yellow", stroke: "orange", strokeWidth: 2 },
new go.Binding("fill", "highlight", function(v) {return v ? "pink" : "lightblue"; }),
new go.Binding("stroke", "highlight", function(v) {return v ? "red" : "blue"; }),
new go.Binding("strokeWidth", "highlight", function(v) {return v ? 3 : 1; })),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
);
var nodeDataArray = [
{ key: "Alpha", loc: "0 0", highlight: false },
{ key: "Beta", loc: "100 50", highlight: true },
{ key: "Gamma", loc: "0 100" } // highlight property undefined: use defaults
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
请注意，转换函数只能返回属性值。 您不能返回GraphObjects来替换Part的可视化树中的对象。 如果您需要根据绑定数据显示不同的GraphObjects，则可以绑定GraphObject.visible或GraphObject.opacity属性。如果你真的想要不同的节点外观，你可以使用多个模板（templateMap）。
更改data值
上面的例子都是初始化得来的。GoJS无法知道当同故宫JavaScript对象更改时，data属性该怎么办。如果你想改变模型中的某个数据对象，并自动更新图表，你应该做什么取决于你正在改变的默认属性。
对于大多数数据属性，模型没有专门处理除了数据绑定，您可以调用Model.setDataProperty。在这个例子中，我们修改了一个节点数据对象上的“highlight”的值。为了好玩，这种修改大约每秒发生两次。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
$(go.Shape, "RoundedRectangle",
{ // default values if the data.highlight is undefined:
fill: "yellow", stroke: "orange", strokeWidth: 2 },
new go.Binding("fill", "highlight", function(v) {return v ? "pink" : "lightblue"; }),
new go.Binding("stroke", "highlight", function(v) {return v ? "red" : "blue"; }),
new go.Binding("strokeWidth", "highlight", function(v) {return v ? 3 : 1; })),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
);
diagram.model.nodeDataArray = [
{ key: "Alpha", highlight: false } // just one node, and no links
];
functionflash() {
var model = diagram.model;
// all model changes should happen in a transaction
model.startTransaction("flash");
var data = model.nodeDataArray[0]; // get the first node data
model.setDataProperty(data, "highlight", !data.highlight);
model.commitTransaction("flash");
}
functionloop() {
setTimeout(function() { flash(); loop(); }, 500);
}
loop();
每0.5s相互转换颜色
改变图结构
对于模型知道的数据属性（例如链接数据的“to”或“from”），必须调用相应的模型方法才能修改数据属性。直接修改数据属性而不调用适当的模型方法可能会导致不一致或未定义的行为。
对于node的data，model对象提供方法：
Model.setCategoryForNodeData，
Model.setKeyForNodeData，
GraphLinksModel.setGroupKeyForNodeData，
TreeModel.setParentKeyForNodeData，
TreeModel.setParentLinkCategoryForNodeData
对于link的data，model对象提供方法：
GraphLinksModel.setCategoryForLinkData，
GraphLinksModel.setFromKeyForLinkData，
GraphLinksModel.setFromPortIdForLinkData，
GraphLinksModel.setToKeyForLinkData，
GraphLinksModel.setToPortIdForLinkData，
GraphLinksModel.setLabelKeysForLinkData。
此示例更改链接数据的“to”属性，导致链接连接到不同的节点。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
$(go.Shape, "RoundedRectangle",
{ fill: "yellow", stroke: "orange", strokeWidth: 2 }),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
);
var nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Gamma" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
functionswitchTo() {
var model = diagram.model;
// all model changes should happen in a transaction
model.startTransaction("reconnect link");
var data = model.linkDataArray[0]; // get the first link data
if (model.getToKeyForLinkData(data) === "Beta")
model.setToKeyForLinkData(data, "Gamma");
else
model.setToKeyForLinkData(data, "Beta");
model.commitTransaction("reconnect link");
}
functionloop() {
setTimeout(function() { switchTo(); loop(); }, 1000);
}
loop();
每0.5s箭头指向转换
绑定到GraphObject源
The binding source object need not be a plain JavaScript dataobject held in the diagram's model. The source object may instead be anamed GraphObject inthe same Part.The source property must be a settable property of the class. The binding isevaluated when the property is set to a new value.
One common use of such a binding is to change the appearance ofa Part when the Part.isSelected.Call Binding.ofObject tocause the Binding to use the object whose GraphObject.name isthe given name. Use the empty string, "", or no argument, to refer tothe whole Part itself. This is a convenience so that you do not need to namethe whole Part. "ofObject" really means "of the GraphObjectnamed ...", as found by Panel.findObject whenthere is a string argument.
In the example below, the Shape.fill isbound to the Part.isSelected property.When the node is selected or de-selected, the Part.isSelected propertychanges value, so the binding is evaluated. The conversion function gets aboolean value and returns the desired brush color to be used as the shape'sfill. This example also turns off selection adornments, so that the only visualway to tell that a node is selected is by the shape's fill color.
diagram.nodeTemplate =
$(go.Node, "Auto",
{ selectionAdorned: false }, // no blue selection handle!
$(go.Shape, "RoundedRectangle",
{ fill: "white" },
// bind Shape.fill to Part.isSelected converted to a color
new go.Binding("fill", "isSelected", function(sel) {
return sel ? "dodgerblue" : "lightgray";
}).ofObject()), // no name means bind to the whole Part
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "descr"))
);
diagram.model.nodeDataArray = [
{ descr: "Select me!" },
{ descr: "I turn blue when selected." }
];
绑定到共享的Model.modelData源中
绑定源对象可能是第三种源，除了面板中的Panel.data或一些GraphObject之外。它也可以是共享的Model.modelData对象的JavaScript对象。这允许将节点或链接元素属性绑定到将存在的模型中的共享属性，并且可以在模型中不存在节点或链接的情况下进行修改。
在下面的例子中，Shape.fill被绑定到Model.modelData对象上的“color”属性。当你点击按钮时，changeColor函数通过调用Model.setDataProperty来修改modelData对象。
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
{ fill: "white" }, // the default value if there is no modelData.color property
new go.Binding("fill", "color").ofModel()), // meaning a property of Model.modelData
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text"))
);
// start all nodes yellow
diagram.model.modelData.color = "yellow";
diagram.model.nodeDataArray = [
{ text: "Alpha" },
{ text: "Beta" }
];
diagram.undoManager.isEnabled = true;
changeColor = function() {
var model = diagram.model;
diagram.startTransaction();
// alternate between lightblue and lightgreen colors
var oldcolor = model.modelData.color;
var newcolor = (oldcolor === "lightblue" ? "lightgreen" : "lightblue");
model.setDataProperty(model.modelData, "color", newcolor);
diagram.commitTransaction("changed shared color");
}
双向数据绑定
上面的所有绑定仅将源数据的值传递给目标属性。但有时您希望能够将来自GraphObjects的值传回模型数据，以保持模型数据与图表保持一致。这可以通过使用双向绑定来实现，该双向绑定不仅可以将值从源传递到目标，还可以将目标对象传递回源数据。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
new go.Binding("location", "loc").makeTwoWay(), // 双向绑定
$(go.Shape, "RoundedRectangle",
{ fill: "lightblue", stroke: "blue", strokeWidth: 2 }),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
);
var nodeDataArray = [
{ key: "Alpha", loc: new go.Point(0, 0) }
];
diagram.model = new go.GraphLinksModel(nodeDataArray);
shiftNode = (function() { //定义一个名为"shiftNode"的回调函数，当点击时触发
// 所有的model中做出的改变都应该在事务中
diagram.startTransaction("shift node");
var data = diagram.model.nodeDataArray[0]; // get the first node data
var node = diagram.findNodeForData(data); // find the corresponding Node
var p = node.location.copy(); // make a copy of the location, a Point
p.x += 10;
if (p.x > 200) p.x = 0;
// changing the Node.location also changes the data.loc property due to TwoWay binding
node.location = p;
// show the updated location held by the "loc" property of the node data
document.getElementById("bindTwoWayData").textContent = data.loc.toString();
diagram.commitTransaction("shift node");
});
shiftNode(); // initialize everything
点击按钮移动节点。这个效果基本上是当用户拖拽节点时发生的。在这个例子中，Node.location上的TwoWay绑定将更新Node的Part.data节点数据的“loc”属性。
就像从源代码到目标代码一样，您可以使用转换函数，您可以为Binding.makeTwoWay提供一个转换函数，以便从目标代码转换为源代码。例如，要将模型数据中的位置表示为字符串，而不是Point：
// Points / Sizes / Rects / Margins / Spots的存储表示形式是字符串，而不是对象：
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)
go.Point.parse表示从data中传入画布中时，以字符串转化为对象存入画布，go.Point.stringify表示的是从画布提取字符串到data中。而不是对象。
Key不能双向绑定！
但是，在“key”属性的节点数据属性上不能有双向绑定。（默认为名称“键”，但实际上是Model.nodeKeyProperty的值。）该属性值在模型中的所有节点数据中必须始终是唯一的，并且由模型知道。双向绑定可能会更改该值，从而导致大量问题。
选择
用户通常通过单击手动选择部件，然后通过单击背景或按Esc键取消选择部件。您可以通过设置Part.isSelected以编程方式选择组件。
用户可以在画布中选择一个组件，此时会有一个长方形方块出现在选择的组件上。在DragSelectingTool的工具简介中阅读更多。
Diagram中有一个选择组件时出现的属性集合：Diagram.selection。集合是只读的--选择或取消选择零件的唯一方法是设置其Part.isSelected属性。您可以通过设置Diagram.maxSelectionCount来限制选择多少个组件。通过将Diagram.allowSelect设置为false，防止用户进行所有选择。 或者通过将Part.selectable设置为false来防止选择特定的部分。
扩展
Gojs的扩展
GoJS可以通过多种方式进行扩展。改变默认函数最常用的方法是在GraphObject，图表，CommandHandler，Tool或Layout上设置属性。但是，如果不存在这样的属性，则可能需要重写CommandHandler，Tool或Layout的方法。API参考中记录了您可以覆盖的方法。这个页面描述了如何通过替换实例上的方法（JavaScript的一个特性）或定义一个子类来覆盖方法。注意：你不应该修改任何GoJS类的原型。
不要修改GoJS类的原型。
只能扩展使用API中记录的属性和方法。
除了我们的样本外，GoJS还提供了一个扩展库，展示了自定义工具和布局的创建。所有这些类和样本已被翻译成TypeScript，可在../extensionsTS/。
命令处理程序
重写commandhandler允许您更改默认的功能和创建自己的键绑定。更多命令见介绍页。并且，下图所示为重写工具类函数和布局的方法也适用于commandhandler。
在不定义子类的情况下重写方法
1.0目前不知道如何具体实现。只将怎么使用记录：