jsPlumb系列问题：请问jsPlumb渲染出来之后线条没有连接节点？需要拖动之后才连上

请问下，为什么这样写出来后的jsPlumb图表是这个样子的

JS是这样的：

init: function() {
    // 初始化流程图配置
    jsPlumbToolkit.ready(function () {
        // 创建流程菜单
        taskConf.createNodePalette(processes);
        // ------------------------ toolkit setup ------------------------------------
        // 获取相关的dom元素
        mainElement = document.querySelector("#jtk-flowchart");
        canvasElement = mainElement.querySelector("#jtk-canvas");
        controls = mainElement.querySelector("#confControls");
        nodePalette = controls.querySelector('#controls-left');
        controlsS2 = document.querySelector("#confControls-s2");
        // 重置当前点击的连线信息
        curSelectedConnection = {};
        // 声明一个工具包，提供创建节点，生成id的方法
        toolkit = jsPlumbToolkit.newInstance({
            idFunction: function (n) {
                return n.id;
            },
            typeFunction: function (n) {
                return n.type;
            },
            nodeFactory: function (typeData, data, callback) {
                //typeDatadata 是程序实例对象
                data.text = typeData['processName'] + '-' + typeData['programVersion'];
                data.processId = typeData['id'];
                //data.id = jsPlumbToolkitUtil.uuid();
                data.type = typeData['type'];
                data.flowId = flowId;
                data = flowEvent.addNode(data, callback);
            }
        });
        // ------------------------ / toolkit setup ------------------------------------


        // 加载流程图
        var flowData = flowEvent.getFlowData(1);
        toolkit.clear();
        chartInstance = toolkit.load({
            data: flowData
        });
        // ------------------------ rendering呈现 ------------------------------------




        // 指导工具包来呈现“画布”的元素。我们通过在一个视图的节点,边缘和港口
        // 一起定义渲染器的外观和行为。注意,我们可以有0 - N渲染器
        // 分配到工具箱的一个实例。
        renderer = window.renderer = chartInstance.render({
            container: canvasElement,
            view: {
                nodes: {
                    // 开始
                    start: {template: 'tmplStart'},
                    // 结束
                    end: {template: 'tmplEnd'},
                    // 采集
                    collect: {template: 'tmpl_1'},
                    // 适配
                    adapt: {template: 'tmpl_1'},
                    // 统计
                    count: {template: 'tmpl_1'},
                    // 分析
                    analyse: {template: 'tmpl_1'}
                },
                // 定义边缘有两种类型——“default”和“connection”,共享一个共同的父节点。
                edges: {
                    'default': {
                        anchor: [[0, 0.5, -1, 0], [0.5, -0.1, 0, -1], [1, 0.5, 1, 0], [0.5, 1, 0, 1]],
                        endpoints: [["Dot", {radius: 3}], ["Dot", {radius: 3}], ["Dot", {radius: 3}], ["Dot", {radius: 3}]],
                        connector: 'Straight',
                        paintStyle: {
                            lineWidth: 2,
                            strokeStyle: '#61B7CF',
                            outlineWidth: 10,
                            outlineColor: 'transparent'
                        },
                        hoverPaintStyle: {lineWidth: 2, strokeStyle: 'rgb(33,100,119)'},
                        events: {
                            'click': function (params) {
                                flowEvent.toggleSelectConnector(params, curSelectedConnection);
                            },
                            'dblclick': function (params) {
                                flowEvent.delEdge(params.edge);
                            }
                        },
                        overlays: [
                            ['Arrow', {location: 1, width: 10, length: 10}]
                        ],
                        reattach: true, // 拖动端点可以解绑并可移动连接到别的节点
                        allowLoopback: false, //防止环回连接
                        allowNodeLoopback: false
                    },
                    'connection': {
                        anchor: [[0, 0.5, -1, 0], [0.5, -0.1, 0, -1], [1, 0.5, 1, 0], [0.5, 1.8, 0, 1]],
                        endpoints: [["Dot", {radius: 3}], ["Dot", {radius: 3}], ["Dot", {radius: 3}], ["Dot", {radius: 3}]],
                        connector: ['Straight'],
                        paintStyle: {
                            lineWidth: 2,
                            strokeStyle: '#61B7CF',
                            outlineWidth: 10,
                            outlineColor: 'transparent'
                        },
                        hoverPaintStyle: {lineWidth: 2, strokeStyle: 'rgb(33,100,119)'},
                        events: {
                            'click': function (params) {
                                flowEvent.toggleSelectConnector(params, curSelectedConnection);
                            },
                            'dblclick': function (params) {
                                flowEvent.delEdge(params.edge);
                            }
                        },
                        overlays: [
                            ['Arrow', {location: 1, width: 10, length: 10}]
                        ],
                        reattach: true, // 拖动端点可以解绑并可移动连接到别的节点
                        allowLoopback: false, //防止环回连接
                        allowNodeLoopback: false
                    },
                    'connectorSelect': {
                        parent: 'connection',
                        paintStyle: {
                            lineWidth: 2,
                            strokeStyle: '#EB523E',
                            outlineWidth: 5,
                            outlineColor: 'transparent'
                        }
                    }
                },
                // 连接端点类型
                ports: {
                    'start': {
                        edgeType: 'default',
                        maxConnections: 1
                    },
                    'source': {
                        maxConnections: 1,
                        edgeType: 'connection'
                    },
                    'target': {
                        maxConnections: 1,
                        edgeType: 'connection'
                    }
                }
            },
            // Layout the nodes using an absolute layout
            layout: {
                type: 'Absolute'
            },
            events: {
                // 画布点击事件
                canvasClick: function (e) {
                    // 清除选中的节点
                    toolkit.clearSelection();
                    // 收起画布左边菜单栏
                    $('#flowList-dropBtn').hasClass('glyphicon-chevron-up') ? $('#flowList-dropBtn').trigger('click') : '';
                },
                // 连接节点时触发
                edgeAdded: function (params) {
                    //console.log(params);
                },
                nodeDropped: function (info) {
                    //console.log(info);
                }
            },
            lassoInvert: true,
            elementsDroppable: true,
            consumeRightClick: false,
            dragOptions: {
                filter: '.node-action, .node-action i'
            }
        });
        renderer.zoomToFit();


        // ------------------------ / rendering ------------------------------------




        // configure Drawing tools. This is an optional include. 配置绘图工具。这是一个可选的包括。
        new jsPlumbToolkit.DrawingTools({
            renderer: renderer
        });


        // ------------------------ drag and drop new tables/views -----------------




        /*
         在这里,我们注册的元素会下降到工作区,工具箱承认新节点。
         typeExtractor:这个函数需要一个元素,并返回jsPlumb代表节点的类型
         这个元素。在这个应用程序中,这些信息存储在“jtk-node-type”属性。
         dataGenerator:这个函数接受一个节点,并返回一些默认数据类型的节点类型。
         */
        var allowDragNodes = nodePalette.querySelectorAll('span.controls-left_icon');
        renderer.registerDroppableNodes({
            droppables: allowDragNodes,
            dragOptions: {
                zIndex: 50000,
                cursor: 'move',
                clone: true
            },
            typeExtractor: function (el) {
                //返回程序实例对象
                var processId = el.getAttribute('processId');
                return processMap[processId];
            },
            dataGenerator: function (data) {
                //data 是程序实例对象
                return {
                    w: 120,
                    h: 30,
                    image: '/admin/etl/taskConf/image/database.svg'
                };
            }
        });


        // ------------------------ / drag and drop new tables/views -----------------




        // 初始化页面事件
        taskConf.initEvents();
        sUtils.lockScreen(false);


    });
    
}

页面调用是这样的：

最后渲染出来的是这样的：

这个时候需要拖动左下角那些线条或者拖动节点之后，连线才能恢复正常位置

https://segmentfault.com/q/1010000008648394