Question

我正在使用jointJS来创建图表。该库创建了悬停时的链接，显示箭头以移动/重新连接它们。我想将它们改成另一种颜色的小圆圈。

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

Answer 1

我重新定义了默认链接＆＃34; arrowhead＆＃34;在我目前的项目中。这是图表代码：

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

ON EDIT：我相信我误解了你的问题。我的方法重新定义了链接头部的默认形状，而不是当您拖动链接末尾时显示的其他图标。我的不好，抱歉。

Answer 2

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

它有一个名为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替换为您希望在子类中看作箭头的任何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('')
    ...
});

JointJS：将链接箭头更改为圆圈

2 个答案: