Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/415.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript JointJS无法连接端口,表示;getPortSelector";不是功能_Javascript_Jointjs_Dagre - Fatal编程技术网

Javascript JointJS无法连接端口,表示;getPortSelector";不是功能

Javascript JointJS无法连接端口,表示;getPortSelector";不是功能,javascript,jointjs,dagre,Javascript,Jointjs,Dagre,我在连接JointJS中自定义元素上的端口时遇到问题。我使用以下代码定义元素: function defineElement(id, parentID, type, elementLabel, toolName, timeRequired, userAccessing, IPInfo, notes) { this.id = id; this.parentID = parentID; this.elementType = type; this.label = elementLabe

我在连接JointJS中自定义元素上的端口时遇到问题。我使用以下代码定义元素:

function defineElement(id, parentID, type, elementLabel, toolName, timeRequired, userAccessing, IPInfo, notes) {
  this.id = id;
  this.parentID = parentID;
  this.elementType = type;
  this.label = elementLabel;
  this.toolName = toolName;
  this.timeRequired = timeRequired;
  this.userAccessing = userAccessing;
  this.IPInfo = IPInfo;
  this.notes = notes;
}

function makeElement(element) {

    var maxLineLength = _.max(element.label.split('\n'), function(l) { return l.length; }).length;

    var letterSize = 8;
    var width = 1.6 * (letterSize * (0.6 * maxLineLength + 1));
    var height = 2 * ((element.label.split('\n').length + 1) * letterSize);

    var newElement;

    joint.shapes.devs.flowchartProcess = joint.shapes.devs.Model.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {


        markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><text class="body-label"/><g class="inPorts"/><g class="outPorts"/></g>',
        portMarkup: '<g class="port port<%= id %>"><circle class="port-body"/><text class="port-label"/></g>',

        defaults: joint.util.deepSupplement({

        type: 'devs.flowchartProcess',
        attrs: {
            '.body': { stroke: 'black' },
            '.body-label': { 'ref-x': .5, 'ref-y': .5, ref: '.body', 'y-alignment': 'middle', 'x-alignment': 'middle' },
            '.port-body': { r: 6, magnet: 'active' },
            '.inPorts .port-body': { stroke: 'gray', fill: 'red' },
            '.outPorts .port-body': { stroke: 'gray', fill: 'green'},
            '.inPorts .port-label': { },
            '.outPorts .port-label': { }
        }

    }, joint.shapes.devs.Model.prototype.defaults),

        getPortAttrs: function(portName, index, total, selector, type) {

            var attrs = {};

            var portClass = 'port' + index;
            var portSelector = selector + '>.' + portClass;
            var portLabelSelector = portSelector + '>.port-label';
            var portBodySelector = portSelector + '>.port-body';

            attrs[portLabelSelector] = { text: portName };
            attrs[portBodySelector] = { port: { id: portName || _.uniqueId(type) , type: type } };

            // CHANGED: swap x and y ports coordinates ('ref-y' => 'ref-x')
            attrs[portSelector] = { ref: '.body', 'ref-x': (index + 0.5) * (1 / total) };
            // ('ref-dx' => 'ref-dy')
            if (selector === '.outPorts') { attrs[portSelector]['ref-dy'] = 0; }
            //

            return attrs;
        }
    }));

    joint.shapes.devs.flowchartProcessView = joint.shapes.devs.ModelView;


            newElement =  new joint.shapes.devs.flowchartProcess ({
                id: element.id,
                size: { width: width, height: height },
                inPorts: ['in'],
                outPorts: ['out'],
                attrs: {
                    text: { text: element.label }
                }
            });
            newElement.attr('rect/fill', { type: 'linearGradient', stops: [{ offset: '0%', color: '#00fdff' },{ offset: '100%', color: '#049a9b' }] });
            newElement.attr('rect/fill/attrs', { x1: '0%', y1: '0%', x2: '0%', y2: '100%' });

    newElement.set('parentID', element.parentID);   
    newElement.set('label', element.label); 

    newElement.attr('text', { fill: '#111111' });   
    newElement.attr('rect/filter', { name: 'dropShadow', args: { dx: 1, dy: 3, blur: 1, opacity: 0.75 } });

    return newElement;

}
function makeLink(parent, child) {

    var thislink = new joint.shapes.devs.Link({
        source: { id: parent.id, selector: parent.getPortSelector('out') },
        target: { id: child.id, selector: child.getPortSelector('in')  },
        attrs: { '.marker-target': { d: 'M 8 0 L 0 4 L 8 8 z' } },
        smooth: false
    });

    thislink.set('router', { name: 'metro' });

    return thislink;

}

但是我得到一个错误,说“getPortSelector”不是一个函数。有什么想法吗?非常感谢

因此,我添加了一个不必要的实例化层,使方法的范围不符合预期,从而给自己造成了问题。明确的步骤是不需要的,是为了把水弄脏


我简化了元素实例化代码,现在一切都好了。

您可以使用
端口
而不是
选择器
属性吗?i、 e.
源:{id:parent.id,端口:'out'},目标:{id:child.id,端口:'in'}