JointJS:将链接箭头更改为圆形

JointJS: Change link arrows to circle

本文关键字：链接 JointJS      更新时间：2023-09-26

我正在使用jointJS创建关系图。库会创建链接，悬停时会显示用于移动/重新连接它们的箭头。我想把它们换成另一种颜色的小圆圈。

由于箭头是默认设计，我不知道应该显示哪些代码——这正是我的问题：如何更改默认设置/SVG布局？

我已经在当前项目中重新定义了默认链接"arrow"。这是图形代码：

var paper = new joint.dia.Paper({
    el: $('#paper'),
    perpendicularLinks: true,
    gridSize: 1,
    model: graph,
    //snapLinks: { radius: 5 },
    defaultLink: new joint.shapes.devs.Link({
        attrs: {
            '.marker-target': {
                d: arrowheadShape
            }
        }
    })
});

这就是保持实际形状定义的变量：

var arrowheadShape = 'M 10 0 L 0 5 L 10 10 z';

在这种情况下，我只调整了默认三角形的大小。您可以将其替换为所需的任意SVG路径。

编辑：我想我误解了你的问题。我的方法重新定义了链接头部的默认形状，而不是拖动链接末端时出现的其他图标。对不起，我的错。

似乎必须使用joint.dia.Link类。

它有一个称为箭头标记的内部属性，它显然负责表示箭头标记（line 5828 @ joint.js v0.9.5）

    arrowheadMarkup: [
      '<g class="marker-arrowhead-group marker-arrowhead-group-<%= end %>">',
      '<path class="marker-arrowhead" end="<%= end %>" d="M 26 0 L 0 13 L 26 26 z" />',
      '</g>'
    ].join('')

尝试将path.marker-arrowhead替换为您希望在子类中显示为箭头的任何SVG代码。

可能生成的代码看起来像这样：

var myPrettyLink = joint.dia.Link.extend({
    ...
    arrowheadMarkup: [
      '<g class="marker-arrowhead-group marker-arrowhead-group-<%= end %>">',
      '<circle class="marker-arrowhead" cx="20" cy="20" r="15"></circle>',
      '</g>'
    ].join('')
    ...
});
相关文章：