Javascript 动态更改JointJS端口颜色

我希望在生成JointJS图后，根据一些外部数据更改该图中的端口颜色

我尝试了以下代码：

var l_portsIn = this.model.get('inPorts');
if (l_portsIn.length > 0){
    this.portProp ('in1','attrs/rect',{stroke: 'red' });
}

其中'in1'是我需要更改的端口ID

这是我的共同目标：

{
  "type": "html.Element",
  "inPorts": [
    "in1",
    "in2",
    "in3",
    "in4",
    "in5"
  ],
  "outPorts": [
    "out1",
    "out2",
    "out3",
    "out4",
    "out5"
  ],
  "position": {
    "x": 600,
    "y": 500
  },
  "size": {
    "width": 170,
    "height": 100
  },
  "angle": 0,
  "label": "Test step #2.",
  "id": "0d29c814-88d7-4429-9d62-c68537098739",
  "z": 2,
  "attrs": {
    ".label": {
      "text": "Test step #2.",
      "ref-x": 0.5,
      "ref-y": 0.4
    },
    ".inPorts>.port0>circle": {
      "port": {
        "id": "in1",
        "type": "in"
      }
    },
    ".inPorts>.port0": {
      "ref": "rect",
      "ref-x": 0.1
    },
    ".inPorts>.port1>circle": {
      "port": {
        "id": "in2",
        "type": "in"
      }
    },
    ".inPorts>.port1": {
      "ref": "rect",
      "ref-x": 0.30000000000000004
    },
    ".inPorts>.port2>circle": {
      "port": {
        "id": "in3",
        "type": "in"
      }
    },
    ".inPorts>.port2": {
      "ref": "rect",
      "ref-x": 0.5
    },
    ".inPorts>.port3>circle": {
      "port": {
        "id": "in4",
        "type": "in"
      }
    },
    ".inPorts>.port3": {
      "ref": "rect",
      "ref-x": 0.7000000000000001
    },
    ".inPorts>.port4>circle": {
      "port": {
        "id": "in5",
        "type": "in"
      }
    },
    ".inPorts>.port4": {
      "ref": "rect",
      "ref-x": 0.9
    },
    ".outPorts>.port0>circle": {
      "port": {
        "id": "out1",
        "type": "out"
      }
    },
    ".outPorts>.port0": {
      "ref": "rect",
      "ref-x": 0.1,
      "ref-dy": 0
    },
    ".outPorts>.port1>circle": {
      "port": {
        "id": "out2",
        "type": "out"
      }
    },
    ".outPorts>.port1": {
      "ref": "rect",
      "ref-x": 0.30000000000000004,
      "ref-dy": 0
    },
    ".outPorts>.port2>circle": {
      "port": {
        "id": "out3",
        "type": "out"
      }
    },
    ".outPorts>.port2": {
      "ref": "rect",
      "ref-x": 0.5,
      "ref-dy": 0
    },
    ".outPorts>.port3>circle": {
      "port": {
        "id": "out4",
        "type": "out"
      }
    },
    ".outPorts>.port3": {
      "ref": "rect",
      "ref-x": 0.7000000000000001,
      "ref-dy": 0
    },
    ".outPorts>.port4>circle": {
      "port": {
        "id": "out5",
        "type": "out"
      }
    },
    ".outPorts>.port4": {
      "ref": "rect",
      "ref-x": 0.9,
      "ref-dy": 0
    }
  }
}

不幸的是，我遇到以下错误：

joint.js:10852 Uncaught Error: Element: unable to find port with id in1
    at n.portProp (https://localhost:8000/libs/joint/joint.js:10852:23)
    at n.modifyPortColor (https://localhost:8000/editor.js:759:16)
    at https://localhost:8000/editor.js:106:21
    at Array.forEach (native)
    at https://localhost:8000/editor.js:104:17
    at Array.forEach (native)
    at HTMLDocument.<anonymous> (https://localhost:8000/editor.js:91:20)
    at j (https://localhost:8000/javascripts/lib/jquery/jquery.min.js:2:27309)
    at Object.fireWith [as resolveWith] (https://localhost:8000/javascripts/lib/jquery/jquery.min.js:2:28122)
    at Function.ready (https://localhost:8000/javascripts/lib/jquery/jquery.min.js:2:29956)
    at HTMLDocument.J (https://localhost:8000/javascripts/lib/jquery/jquery.min.js:2:30322)
portProp @ joint.js:10852
modifyPortColor @ editor.js:759
(anonymous) @ editor.js:106
(anonymous) @ editor.js:104
(anonymous) @ editor.js:91
j @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
J @ jquery.min.js:2

当I console.log

this.prop（'ports/items'）

时，它是未定义的

---

有人有什么想法吗？

您是否尝试使用element.getPort（'in1'）返回带有id的元素，并设置您想要的道具

还要尝试获取所有端口的列表，以便调试所有端口是否都已正确设置

还可以使用调试器检查端口是否正确设置了id。你设置端口的方式对我来说有点奇怪。但只要您能够获得具有正确id的元素，就可以设置其属性

updateNode: function () {
        var currentGraph = this.graph;

        _.each(currentGraph.getElements(), function (node) {
            if (node.attributes.type === 'shape.Circle') {
               node.attr('text/text', getRandomIntInclusive(1, 10).toString());
           }
        }

---

您是否尝试使用element.getPort（'in1'）返回带有id的元素，并且他们设置了您想要的道具

还要尝试获取所有端口的列表，以便调试所有端口是否都已正确设置

还可以使用调试器检查端口是否正确设置了id。你设置端口的方式对我来说有点奇怪。但只要您能够获得具有正确id的元素，就可以设置其属性

updateNode: function () {
        var currentGraph = this.graph;

        _.each(currentGraph.getElements(), function (node) {
            if (node.attributes.type === 'shape.Circle') {
               node.attr('text/text', getRandomIntInclusive(1, 10).toString());
           }
        }

---

您可以使用

元素.portProp（portId、path、value）

演示：

文件：

---

您可以使用

元素.portProp（portId、path、value）

演示：

文件：

---

如果我这样做：--var firstElement=graph.getElements（）[0]；console.log（firstElement.getPort（'in1'）；--这将在浏览器控制台中返回

未定义的

。您需要图形的引用。。。如果我这样做，我将发布一个带有示例的anwser:--var firstElement=graph.getElements（）[0]；console.log（firstElement.getPort（'in1'））；--这将在浏览器控制台中返回

未定义的

。您需要图形的引用。。。我将发布一个带有示例的anwser