GOJS入門(2)
阿新 • • 發佈：2018-12-12
由於GOJS是基於html5的js庫，所以使用他的網頁必須生命是一個html5的文件
<!DOCTYPE html> <!-- HTML5 document type -->
<html>
<head>
<!-- use go-debug.js when developing and go.js when deploying -->
<script src="go-debug.js"></script>
可以直接下載gojs的檔案或者使用cdn，
不過由於商用版本的限制，個人用的版本會出現水印
每個圖表都被包含在一個確定大小的html div元素中
<!-- The DIV for a Diagram needs an explicit size or else we will not see anything. In this case we also add a background color so we can see that area. --> <div id="myDiagramDiv" style="width:400px; height:150px; background-color: #DAE4E4;"></div>
通過div的id初始化成gojs的圖表內容
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv");
從程式碼裡面可以看到go是作為整個框架的名稱空間在使用，所有用到gojs相關內容的部分都是以go開頭的
$符號作為go.GraphObject.make的縮寫也被用的很多，如果程式碼裡面$用於其他用途，比如jquery，那可以將這個改用其他的縮寫形式，比如$$,或者MAKE等等
示例中的js引用，以及程式碼的書寫都是放在html的head標籤裡面的，這個有些難以理解，經測試放到body後也是可以使用的，不知道是有什麼特殊的設定，後續學習的過程中看看是否有特別的地方。
GOJS是基於資料驅動MV(model-view)架構模型，資料儲存於model中，用於修改和儲存，圖表根據node及link資料進行視覺化展現
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
});
var myModel = $(go.Model);
// in the model data, each node is represented by a JavaScript object:
myModel.nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Gamma" }
];
myDiagram.model = myModel;
這樣一段簡單的程式碼完成後，就可以實現如下的功能：
- 點選空白並按住滑鼠左鍵，可以通過平移整個圖表
- 點選節點可以選中
- 選中節點並按住滑鼠左鍵，可以移動特定節點
- 點選空白並按住滑鼠左鍵，可以畫出一個選擇框，選中多個節點（與1的區別是，點選後等1s再滑動滑鼠，這個隱藏屬性也是醉了）
- 選中節點後，使用ctrl+c ctrl+v的方式 可以複製節點
- 選中節點後，使用delete按鈕可以刪除節點
- 使用ctrl+z ctrl+y可以進行撤回和重做操作（需要開啟"undoManager.isEnabled": true 屬性）
在一個程式碼量比較少的情況可以完成這麼多功能，也是非常不錯的，可以看出gojs本身已經將大部分互動的動作內建到框架本身，只需要通過設定相應的屬性即可完成。