Question

我现在已经与JointJS合作了一段时间，并在其中创建了包含HTML的元素。

但是，我遇到了另一个问题，是否可以放置HTML代码，比如在JointJS链接上 href ， img 等，我该怎么做？

例如，如果我有此链接，如何修改它以包含HTML：

var link = new joint.dia.Link({
        source: { id: sourceId },
        target: { id: targetId },
        attrs: { 
            '.connection': { 'stroke-width': 3, stroke: '#000000' }
        }
    });

谢谢！

Answer 1

JointJS在链接中没有HTML的直接支持。但是，可以使用一点JointJS技巧：

// Update position of our HTML whenever source/target or vertices of our link change:
link.on('change:source change:target change:vertices', function() { updateHTMLPosition(link, $html) });
// Update position of our HTML whenever a position of an element in the graph changes:
graph.on('change:position', function() { updateHTMLPosition(link, $html) });

var $html = $('<ul><li>one</li><li>two</li></ul>');
$html.css({ position: 'absolute' }).appendTo(paper.el);

// Function for updating position of our HTML list.
function updateHTMLPosition(link, $html) {

    var linkView = paper.findViewByModel(link);
    var connectionEl = linkView.$('.connection')[0];
    var connectionLength = connectionEl.getTotalLength();
    // Position our HTML to the middle of the link.
    var position = connectionEl.getPointAtLength(connectionLength/2);
    $html.css({ left: position.x, top: position.y });
}

Answer 2

有点老问题，但我想我会增加一些想法。如果您愿意，可以通过扩展链接对象然后在需要时设置属性来为链接中的标签添加额外的svg标记。例如：

joint.shapes.custom.Link = joint.dia.Link.extend({
    labelMarkup: '<g class="label"><rect /><text /></g>'
});

此代码会覆盖标签的标记，因此您可以在其中添加额外的元素。您还可以通过以下方式更新这些元素的属性：

link.attr('text/text', "new text");

然而，超链接不起作用（至少我没有让他们在Chrome中工作）我相信这是因为Jointjs监听模型中的所有事件。所以你应该做的是使用Jointjs中的内置事件来监听连接点击：

paper.on('cell:pointerclick', function(cellView, evt, x, y){
    console.log(cellView);
});

将HTML代码放在JointJS链接上

2 个答案: