复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果
<script>
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv", {
"undoManager.isEnabled": true // 启用Ctrl-Z撤消和Ctrl-Y重做
});
var myModel = $(go.Model);
// 在模型数据中,每个节点都由一个JavaScript对象表示:
myModel.nodeDataArray = \[{
key: "Alpha"
},
{
key: "Beta"
},
{
key: "Gamma"
}
\];
myDiagram.model = myModel;
</script>
复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果
<script>
var $ = go.GraphObject.make;
var myDiagram = $(go.Diagram, "myDiagramDiv", {
"undoManager.isEnabled": true // 启用Ctrl-Z撤消和Ctrl-Y重做
});
var myModel = $(go.Model);
// 在模型数据中,每个节点都由一个JavaScript对象表示:
var nodeDataArray = \[{
key: "Alpha"
},
{
key: "Beta"
},
{
key: "Gamma"
}
\];
var linkDataArray = \[{
from: "Alpha",
to: "Beta"
},
{
from: "Alpha",
to: "Gamma"
}
\];
myModel = new go.GraphLinksModel(nodeDataArray, nodeLinkDataArray);
myDiagram.model = myModel;
</script>
复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果
<script>
var $ = go.GraphObject.make;
var diagram = new go.Diagram("myDiagramDiv");
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", {
fill: "white"
},
new go.Binding("fill", "color")), // shape.fill = data.color
$(go.TextBlock, {
margin: 20
},
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);
</script>
复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果
<script>
var $ = go.GraphObject.make;
var diagram = new go.Diagram("myDiagramDiv");
diagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc"), // 从data.loc值获取Node.location
$(go.Shape, "RoundedRectangle", {
fill: "white"
},
new go.Binding("fill", "color")),
$(go.TextBlock, {
margin: 10
},
new go.Binding("text", "key"))
);
var nodeDataArray = \[
// 为每个节点使用Point值指定位置
{
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);
</script>
复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果
<script>
var $ = go.GraphObject.make;
var diagram = new go.Diagram("myDiagramDiv");
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);
</script>
复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果
<script>
var $ = go.GraphObject.make;
var diagram = new go.Diagram("myDiagramDiv");
diagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse),
$(go.Shape, "RoundedRectangle", { // 如果data.highlight未定义,则为默认值:
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: 10
},
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"
} // 高亮属性未定义:使用默认值
\];
var linkDataArray = \[{
from: "Alpha",
to: "Beta"
}\];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
</script>
复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果
<script>
//为了简洁
var $ = go.GraphObject.make;
var diagram = new go.Diagram("myDiagramDiv");
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
\];
function flash() {
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");
}
function loop() {
//每0.5s相互转换颜色
setTimeout(function () {
flash();
loop();
}, 500);
}
loop();
</script>
手机扫一扫
移动阅读更方便
你可能感兴趣的文章