<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GoJS实例--修改节点名称</title> <style> #myDiagramDiv { width: 400px; height: 500px; background-color: #DAE4E4; } </style> <script src="https://unpkg.com/gojs/release/go-debug.js"></script> </head> <body> <div id="myDiagramDiv"></div> <script> var diagram = new go.Diagram("myDiagramDiv"); var $ = go.GraphObject.make; diagram.add( $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", { fill: "lightblue" }), $(go.TextBlock, "修改节点名称", { margin: 5 }) )); 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", "name")) ); diagram.model.nodeDataArray = [ { key: "Alpha", name: "how are you?", highlight: false } // just one node, and no links ]; function flash() { // all model changes should happen in a transaction diagram.model.commit(function (m) { var data = m.nodeDataArray[0]; // get the first node data m.set(data, "highlight", !data.highlight); console.log(data); // 修改节点数据对象上的“name”值,注意这里能修改是因为定义了Binding：new go.Binding("text", "name") m.set(data, "name", 'I am doing well'); }, "flash"); } function loop() { setTimeout(function () { flash(); loop(); }, 2000); } loop(); </script> </body>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GoJS实例--改变箭头</title> <style> #myDiagramDiv { width: 400px; height: 500px; background-color: #DAE4E4; } </style> <script src="https://unpkg.com/gojs/release/go-debug.js"></script> </head> <body> <div id="myDiagramDiv"></div> <script> var diagram = new go.Diagram("myDiagramDiv"); var $ = go.GraphObject.make; diagram.add( $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", { fill: "lightblue" }), $(go.TextBlock, "GoJS实例--改变箭头", { margin: 5 }) )); 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); function switchTo() { // all model changes should happen in a transaction diagram.model.commit(function(m) { var data = m.linkDataArray[0]; // get the first link data if (m.getToKeyForLinkData(data) === "Beta") m.setToKeyForLinkData(data, "Gamma"); else m.setToKeyForLinkData(data, "Beta"); }, "reconnect link"); } function loop() { setTimeout(function() { switchTo(); loop(); }, 1000); } loop(); </script> </body>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GoJS实例--选中节点改变填充颜色</title> <style> #myDiagramDiv { width: 400px; height: 500px; background-color: #DAE4E4; } </style> <script src="https://unpkg.com/gojs/release/go-debug.js"></script> </head> <body> <div id="myDiagramDiv"></div> <script> var diagram = new go.Diagram("myDiagramDiv"); var $ = go.GraphObject.make; diagram.add( $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", { fill: "lightblue" }), $(go.TextBlock, "GoJS实例--选中节点改变填充颜色", { margin: 5 }) )); diagram.nodeTemplate = $(go.Node, "Auto", { selectionAdorned: false }, // no blue selection handle! $(go.Shape, "RoundedRectangle", // bind Shape.fill to Node.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: "点我变蓝" }, { descr: "选我变蓝" } ]; </script> </body>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GoJS实例--改变共享颜色</title> <style> #myDiagramDiv { width: 400px; height: 500px; background-color: #DAE4E4; } </style> <script src="https://unpkg.com/gojs/release/go-debug.js"></script> </head> <body> <div id="myDiagramDiv"></div> <button id="zoomToFit" onclick="changeColor()">点我改变共享的颜色</button> <script> var diagram = new go.Diagram("myDiagramDiv"); var $ = go.GraphObject.make; diagram.add( $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", { fill: "lightblue" }), $(go.TextBlock, "GoJS实例--改变共享颜色", { margin: 5 }) )); 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 () { // define a function named "changeColor" callable by button.onclick diagram.model.commit(function (m) { // alternate between lightblue and lightgreen colors var oldcolor = m.modelData.color; var newcolor = (oldcolor === "lightblue" ? "lightgreen" : "lightblue"); m.set(m.modelData, "color", newcolor); }, "changed shared color"); } </script> </body>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GoJS实例--TwoWay Binding双向数据绑定</title> <style> #myDiagramDiv { width: 400px; height: 500px; background-color: #DAE4E4; } </style> <script src="https://unpkg.com/gojs/release/go-debug.js"></script> </head> <body> <div id="myDiagramDiv"></div> <button id="xxx" onclick="shiftNode()">改变节点位置</button> <script> var diagram = new go.Diagram("myDiagramDiv"); var $ = go.GraphObject.make; diagram.add( $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", { fill: "lightblue" }), $(go.TextBlock, "GoJS实例--TwoWay Binding双向数据绑定， 此例可用于外部页面改变节点样式", { margin: 5 }) )); diagram.nodeTemplate = $(go.Node, "Auto", { locationSpot: go.Spot.Center }, new go.Binding("location", "loc").makeTwoWay(), // TwoWay Binding $(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(90, 90) } ]; diagram.model = new go.GraphLinksModel(nodeDataArray); shiftNode = (function() { // 定义一个名为“shiftNode”的函数，该函数由button.onclick调用 // 所有的模型变更都应该发生在一个事务中 diagram.commit(function(d) { var data = d.model.nodeDataArray[0]; // get the first node data var node = d.findNodeForData(data); // 查找对应节点 var p = node.location.copy(); // 复制一个位置，一个点 p.x += 10; if (p.x > 200) p.x = 0; // ：改变节点.位置也会改变数据. 双向绑定loc属性 node.location = p; // 显示由节点数据的“loc”属性持有的更新位置 document.getElementById("bindTwoWayData").textContent = data.loc.toString(); }, "shift node"); }); shiftNode(); // initialize everything </script> </body>