JointJS：将 link 箭头更改为圆形

Question

我正在使用 jointJS 创建图表。图书馆在悬停时创建链接，为 moving/reconnecting 显示箭头。我想把它们换成另一种颜色的小圆圈。

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

Answer 1

看来你得和joint.dia.Linkclass一起工作了。

它有内部属性称为 arrowheadMarkup，它显然负责表示箭头标记 (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 替换为您希望在 child class.

中显示为箭头的任何 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('')
    ...
});

Answer 2

我在当前项目中重新定义了默认值link "arrowhead"。这是图形代码：

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 路径。

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

JointJS：将 link 箭头更改为圆形

JointJS: Change link arrows to circle

javascript

svg

jointjs