如何让一个jointjs.dia.link结束在一个圆圈中？

Question

我正在将一段使用 jointjs v0.9 的旧代码迁移到最新版本 (2.2.1)。这部分代码创建了一个简单的 link，末尾有一个小圆圈（目标标记），但在最新版本中，这段代码不起作用：

 link = new Joint.dia.Link({
    source: { x: x, y: 0 }
    target: { x: x, y: y }
    markup: '<path class="connection" d="M 0 0 0 0"/><circle r="5" />'
    attrs: { '.connection': `connection ${this.getStyleClass()}`
 })

如何创建一个 link 一个 Join.dia.link 以圆作为目标标记？

Answer 1

var link = new joint.dia.Link({
    source: {
        id: srcId
    },
    target: {
        id: destId
    }, 
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    toolMarkup: "none"
});
link.attr({
    '.marker-target': { fill: 'red', d: 'M 0, 0 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0', stroke: 'none' },
    '.connection': { stroke: 'red', 'stroke-width': '1px' },
    '.marker-arrowheads': { display: "none" }
});

在此 d:'M 0, 0 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0' 中将圆圈设置到 link 的末尾。如果你想要任何其他形状，你可以写它的路径代码并在这里设置它。

如何让一个jointjs.dia.link结束在一个圆圈中？

How to make a jointjs.dia.link end in a circle?

jointjs