如何设置从磁铁端口创建的 link 的样式？

Question

我正在尝试弄清楚如何在使用端口之间的拖放连接两个元素时设置 link 的样式。

我知道您可以像这样使用 link.attr 设置 link 的样式：

link.attr({
line: { // selector for the visible <path> SVGElement
    stroke: 'orange' // SVG attribute and value
}

});

假定您手动创建 link 并将其添加到图表中。然而，我发现设计磁铁 link 的唯一选择是在像这样创建纸张时：

initializeScene(domNode) {
this.paper = new joint.dia.Paper({
  el: domNode,
  model: this.graph,
  width: "100%",
  height: "100%",
  gridSize: 1,
  //define the style of magnet links
  defaultLink: new joint.shapes.standard.Link({
    attrs: {
      line: {
        stroke: "#4e4e4e"
      }
    }
  })
});

有没有办法通过磁铁单独设置 link 的样式。例如，如果我希望从端口 A 创建的 link 为蓝色，而从端口 B 创建的 link 为红色？

Answer 1

joint.dia.Paper 的 defaultLink 选项也可以是函数而不是普通对象。该函数的形式为 function(cellView, magnet)。这样，您可以动态定义默认值 link，以便在用户 "drags" 磁铁创建新的 link 时使用。例如：

this.paper = new joint.dia.Paper({
  el: domNode,
  model: this.graph,
  width: "100%",
  height: "100%",
  gridSize: 1,
  //define the style of magnet links
  defaultLink: function(cellView, magnet) {
    return new joint.shapes.standard.Link({
        attrs: {
          line: {
            stroke: V(magnet).attr('port-group') === "blue-ports" ? "blue" : "red"
          }
        }
    }
  })
});

默认链接选项的文档在这里：https://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Paper.prototype.options.defaultLink

如何设置从磁铁端口创建的 link 的样式？

How to style a link created from a magnet port?

jointjs