GoJS教程：链接模版

最新推荐文章于 2024-07-18 11:13:00 发布

xiaochuachua

最新推荐文章于 2024-07-18 11:13:00 发布

阅读量1.3k

点赞数 1

分类专栏：产品文章标签： gojs 图表图表控件燃烬图

产品专栏收录该内容

380 篇文章 9 订阅

订阅专栏

本文介绍了如何使用GoJS创建自定义链接模板。内容包括设置链接的形状、样式、路由方式等，以适应复杂的节点布局。通过修改Link的形状、颜色、线条宽度和路由属性，实现无箭头、角部圆润的正交链接。最后展示了完整代码和生成的组织图效果。

摘要由CSDN通过智能技术生成

下载GoJS最新版本

链接模板

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

GoJS