javascript - 更改 JointJS 中的端口设计

Question

我正在尝试使用 JointJS 创建图形，其中 Link 从输出端口 od 1 元素开始，并且可以与整个其他元素(或当前元素本身)连接 - 不仅与输入端口连接。我的想法是修改输入端口样式，以覆盖它所属的元素，但是我在以任何方式更改端口形状时遇到问题，它总是在元素左侧有一个小圆圈，并且我的 CSS 都不起作用。有人可以给点建议吗？

Answer 1

您可以按如下方式更新端口属性:

var a = new joint.shapes.devs.Model({
    position: { x: 50, y: 50 },
    size: { width: 100, height: 100 },
    attrs: {
        '.port-label': {
            fill: 'red'
        },
        // change position and size of the 'a' port
        '.inPorts .port0 circle': {
            r: 15,
          'ref-x': -20,
          'ref-y': 10,
          stroke: 'red',
          'stroke-width': 5
        }, 
        // change color on a single port 
        '.inPorts .port0 .port-label': {
            fill: 'blue',
        }
    },
    inPorts: ['a', 'aa', 'aaa'],
    outPorts: ['b']

https://jsfiddle.net/vtalas/43sthc6g/

但是，您不需要使用端口来实现此目的，您可以直接连接到整个元素，如下所示:

var a = new joint.shapes.basic.Rect({
    size: { width: 100, height: 100 },
    position: { x: 300, y: 300 },
    attrs: {
        'rect': { magnet: true }
    }

}).addTo(graph);

var b = new joint.shapes.basic.Rect({
    size: { width: 100, height: 100 },
    position: { x: 100, y: 100 },
    attrs: {
        'rect': { magnet: true }
    }
}).addTo(graph);

new joint.dia.Link({ source: { id: b.id }, target: { id: a.id } }).addTo(graph);

结果:https://jsfiddle.net/vtalas/davLzsng/