GOJS入門(1)
阿新 • • 發佈:2018-12-12
計劃製作一個視覺化的神經網路設計工具,調研了多種前端畫圖的框架,包括gojs、draw2d、tensorspace、d3等,發現gojs的實現最符合我的需要,儘管基於jqueryui的樣式稍微有些醜、商用版本的加個也很貴:(
GOJS是一個用於實現互動式圖示的javascript庫,同時支援typescript。GOJS可以用於建立大量不同型別的互動式圖表,包括資料視覺化、畫圖工具和圖片編輯。他已經包含了許多內建的佈局方式,包括樹型、力導向型、雷達型、分層有向圖以及大量自定義佈局例項。
<script src="go.js"></script> <script id="code"> function init() { var $ = go.GraphObject.make; // for conciseness in defining templates var myDiagram = $(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element { // enable undo & redo "undoManager.isEnabled": true }); // define a simple Node template myDiagram.nodeTemplate = $(go.Node, "Auto", // the Shape will go around the TextBlock $(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "white" }, // Shape.fill is bound to Node.data.color new go.Binding("fill", "color")), $(go.TextBlock, { margin: 8 }, // some room around the text // TextBlock.text is bound to Node.data.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: "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>