GoJS教程：链接模版

我们将构建一个新的链接模板，以更好地适应我们广泛的节点。一个链接是一种不同的部分，而不是像一个节点。Link的主要元素是Link的形状，并且必须是一个由GoJS动态计算其几何形状的Shape。我们的链接将仅由这种形状组成，其笔划比正常情况稍厚，而深灰色则不是黑色。与默认链接模板不同，我们没有箭头。我们将链接routing属性从“正常” 更改为“正交”，并为其赋予一个corner值，以便对角度进行舍入。

下载GoJS最新版本

链接模板

我们将构建一个新的链接模板，以更好地适应我们广泛的节点。一个链接是一种不同的部分，而不是像一个节点。Link的主要元素是Link的形状，并且必须是一个由GoJS动态计算其几何形状的Shape。我们的链接将仅由这种形状组成，其笔划比正常情况稍厚，而深灰色则不是黑色。与默认链接模板不同，我们没有箭头。我们将链接routing属性从“正常” 更改为“正交”，并为其赋予一个corner值，以便对角度进行舍入。

// define a Link template that routes orthogonally, with no arrowheadmyDiagram.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 earliermyDiagram.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 arrowheadmyDiagram.linkTemplate =  $(go.Link,    { routing: go.Link.Orthogonal, corner: 5 },    $(go.Shape, { strokeWidth: 3, stroke: "#555" })); // the link shapevar 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;      

购买GoJS正版授权，请点击“咨询在线客服”哟！

标签：图表图表控件流程图

来源：慧都