gojs之Minimal学习
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>gojs之Minimal学习</title>
<script src="./node_modules/gojs/release/go-debug.js"></script>
<script id="code">
function init() {
if (window.goSamples) goSamples();
/*
* gojs 有两种使用方法, 一种是使用原本的 go 对象,
* 第二种则是构造器方式创建, 即使用 go.GraphObject.make 对象创建,我们将该对象赋值给 $,
* 当然为了避免冲突也可以是其他符号
* */
var $ = go.GraphObject.make;
/*
* $(go.Diagram, [selector], [options])
* 该方法会执行 canvas 画布的初始化操作,
* 同时也提供了丰富的配置项使用
* */
myDiagram = $(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
{
initialContentAlignment: go.Spot.Center, // 令绘制的元素相对画布居中
"undoManager.isEnabled": true // 是否可撤销编辑 Ctrl+z / Ctrl+y 撤销重做
});
// 编写节点模板
myDiagram.nodeTemplate =
$(go.Node, "Auto", // Shape 将环绕在 TextBlock 周围
// 绘图形
$(go.Shape, "RoundedRectangle", {strokeWidth: 0, fill: "white"},
// Shape.fill is bound to Node.data.color
/*
* new go.Binding([origin], [target], [filter = Func])
* 这是 gojs 中的数据绑定, 使用该方法实现了模板与真实数据之间的传递
* 该方法能在任意构造器中使用
* origin: 该构造器中的属性名
* target: 需要绑定到数据集中的属性名
* filter: 过滤函数
* */
// fill 填充颜色从GraphLinksModel内获取，与color对应
new go.Binding("fill", "color")),
// 添加文字
$(go.TextBlock,
// 设置文字的margin值
{margin: 8},
// 设置文字内容，从GraphLinksModel内获取，与key对应
new go.Binding("text", "key"))
);
// but use the default Link template, by not setting Diagram.linkTemplate
// create the model data that will be represented by Nodes and Links
myDiagram.model = new go.GraphLinksModel(
[
// key 属性是必填的且具有唯一性, 它将运用到连接线数据集中 这里被用于每个node的文字
{key: "Alpha", color: "lightblue"},
{key: "Beta", color: "orange"},
{key: "Gamma", color: "lightgreen"},
{key: "Delta", color: "pink"}
],
[
{from: "Alpha", to: "Beta"},
{from: "Alpha", to: "Gamma"},
{from: "Beta", to: "Beta"},
{from: "Gamma", to: "Delta"},
{from: "Delta", to: "Alpha"}
]);
}
</script>
</head>
<body onload="init()">
<div id="sample">
<!-- The DIV for the Diagram needs an explicit size or else we won't see anything.
This also adds a border to help see the edges of the viewport. -->
<div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>
</div>
</body>
</html>
网友评论