用GoJS实现图形化交互编程界面示例

GoJS是一款HTML5的图形化图表类应用开发库。可以方便的构建类似Unity 3D Graph编程界面，使用鼠标拖拉在节点之间建立数据流输入输出关系。

go.js, example, graph, diagram

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4064
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function load() {
    myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
    // When copying a node, we need to copy the data that the node is bound to.
    // This JavaScript object includes properties for the node as a whole, and
    // four properties that are Arrays holding data for each port.
    // Those arrays and port data objects need to be copied too.
    // Thus Model.copiesArrays and Model.copiesArrayObjects both need to be true.
    // Link data includes the names of the to- and from- ports;
    // so the GraphLinksModel needs to set these property names:
    // linkFromPortIdProperty and linkToPortIdProperty.
}

window.onload = function() {
    init()
};

编译

CSS

HTML

<div id="sample">
    <div id="myDiagramDiv" style="width:600px; height:500px; border:1px solid black"></div>
    Add port to selected nodes:
    <button onclick="addPort('top')">Top</button>
    <button onclick="addPort('bottom')">Bottom</button>
    <button onclick="addPort('left')">Left</button>
    <button onclick="addPort('right')">Right</button>
    <p>
        Double-click in the diagram background in order to add a new node there. In this sample you can add ports to a selected node by clicking the above buttons or by using the context menu. Draw links between ports by dragging between ports. If you select
        a link you can relink or reshape it. Right-click or touch-hold on a port to bring up a context menu that allows you to remove it or change its color.
    </p>
    <p>
        The diagram also uses a custom link to allow for special routing to help parallel links avoid each other using overridden <a>Link.computeEndSegmentLength</a>, <a>Link.hasCurviness</a>, and <a>Link.computeCurviness</a> functions.
    </p>
    <div>
        <div>
            <button id="SaveButton" onclick="save()">Save</button>
            <button onclick="load()">Load</button>
            Diagram Model saved in JSON format:
        </div>
        <textarea id="mySavedModel" style="width:100%;height:250px">
            { "class": "go.GraphLinksModel", "copiesArrays": true, "copiesArrayObjects": true, "linkFromPortIdProperty": "fromPort", "linkToPortIdProperty": "toPort", "nodeDataArray": [ {"key":1, "name":"unit One", "loc":"101 204", "leftArray":[ {"portColor":"#425e5c",
            "portId":"left0"} ], "topArray":[ {"portColor":"#d488a2", "portId":"top0"} ], "bottomArray":[ {"portColor":"#316571", "portId":"bottom0"} ], "rightArray":[ {"portColor":"#923951", "portId":"right0"},{"portColor":"#ef3768", "portId":"right1"}
            ] }, {"key":2, "name":"unit Two", "loc":"320 152", "leftArray":[ {"portColor":"#7d4bd6", "portId":"left0"},{"portColor":"#cc585c", "portId":"left1"},{"portColor":"#b1273a", "portId":"left2"} ], "topArray":[ {"portColor":"#14abef", "portId":"top0"}
            ], "bottomArray":[ {"portColor":"#dd45c7", "portId":"bottom0"},{"portColor":"#995aa6", "portId":"bottom1"},{"portColor":"#6b95cb", "portId":"bottom2"} ], "rightArray":[ ] }, {"key":3, "name":"unit Three", "loc":"384 319", "leftArray":[ {"portColor":"#bd8f27",
            "portId":"left0"},{"portColor":"#c14617", "portId":"left1"},{"portColor":"#47fa60", "portId":"left2"} ], "topArray":[ {"portColor":"#d08154", "portId":"top0"} ], "bottomArray":[ {"portColor":"#6cafdb", "portId":"bottom0"} ], "rightArray":[
            ] }, {"key":4, "name":"unit Four", "loc":"138 351", "leftArray":[ {"portColor":"#491389", "portId":"left0"} ], "topArray":[ {"portColor":"#77ac1e", "portId":"top0"} ], "bottomArray":[ {"portColor":"#e9701b", "portId":"bottom0"} ], "rightArray":[
            {"portColor":"#24d05e", "portId":"right0"},{"portColor":"#cfabaa", "portId":"right1"} ] } ], "linkDataArray": [ {"from":4, "to":2, "fromPort":"top0", "toPort":"bottom0"}, {"from":4, "to":2, "fromPort":"top0", "toPort":"bottom0"}, {"from":3,
            "to":2, "fromPort":"top0", "toPort":"bottom1"}, {"from":4, "to":3, "fromPort":"right0", "toPort":"left0"}, {"from":4, "to":3, "fromPort":"right1", "toPort":"left2"}, {"from":1, "to":2, "fromPort":"right0", "toPort":"left1"}, {"from":1, "to":2,
            "fromPort":"right1", "toPort":"left2"} ]}
        </textarea>
    </div>
</div>

GoJS是一款HTML5的图形化图表类应用开发库。可以方便的构建类似Unity 3D Graph编程界面，使用鼠标拖拉在节点之间建立数据流输入输出关系。

go.js, example, graph, diagram

编辑器支持Emmet

快捷键

GoJS是一款HTML5的图形化图表类应用开发库。可以方便的构建类似Unity 3D Graph编程界面，使用鼠标拖拉在节点之间建立数据流输入输出关系。

go.js, example, graph, diagram

使用SVG实现波浪形的天气预报图

基于ReactJS实现的数据可视化状态图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：