ダイアグラムを初期化するJavaScriptコード

diagram-baisc-page-load.js

requirejs.config({
   paths: {
        'diagramLayouts': "&APEX_PATH!RAW.#APP_FILES#layouts",
    }
});

require(["require", "exports", "knockout", "ojs/ojbootstrap", "diagramLayouts/DemoCircleLayout", "ojs/ojarraydataprovider", "ojs/ojattributegrouphandler", "ojs/ojknockout", "ojs/ojdiagram"], function (require, exports, ko, ojbootstrap_1, layout, ArrayDataProvider, ojattributegrouphandler_1) {
      "use strict";
      
    class DiagramModel {
        /*
         * Diagramで表示するデータを更新する。
         */
        update(data) {
            this.nodeDataProvider(new ArrayDataProvider(data.nodes, {
                keyAttributes: "id",
            }));
            this.linkDataProvider(new ArrayDataProvider(data.links, {
                keyAttributes: "id",
            }));
        }

        constructor() {
            // this.data = JSON.parse(jsonData);
            this.colorHandler = new ojattributegrouphandler_1.ColorAttributeGroupHandler();
            this.layoutFunc = layout.circleLayoutWithLayoutArgs(150);
            this.panningValue = ko.observable(apex.items.P1_PANNING.value);
            this.zoomingValue = ko.observable(apex.items.P1_ZOOMING.value);
            /*
             * this.nodeDataProvider, linkDataProviderはknockoutのobservableArrayに変更し、
             * データはコンストラクタの外から設定する。
             */            
            this.nodeDataProvider = ko.observableArray();
            this.linkDataProvider = ko.observableArray();
        }
    }
    (0, ojbootstrap_1.whenDocumentReady)().then(() => {
        diagram = new DiagramModel();
        ko.applyBindings(diagram, document.getElementById('diagram-container'));
        /* ページ・ロード時の表示 */
        apex.actions.invoke("update-diagram");        
    });
});

/*
 * Diagramを更新する。
 */
apex.actions.add([
    {
        name: "update-diagram",
        action: () => {
            apex.server.process ( "GET_DATA", {},
                {
                    success: (data) =>  {
                        // console.log(data);
                        diagram.update(data);
                    }
                }
            );
        }
    }
]);