单击时如何更新JointJS中链接的标签？答案

【问题标题】：How to update label of a link in JointJS when i click it?单击时如何更新JointJS中链接的标签？
【发布时间】：2017-06-08 07:55:13
【问题描述】：

这几天我一直在为此苦苦挣扎。情况如下：

我希望当我单击图表的链接时，我可以修改该链接的标签。到目前为止，我能够做的是我有一个文本输入，我在其中编写我想要的文本，然后当我连接两个元素时，我创建的链接将有这个标签，但有点错误（主要是，我必须再次连接和断开一个元素以在链接中添加我需要的标签）。

我想如果您知道哪种方式合适但我不知道（即使我一直在查看文档），这可以轻松完成。

这是我的js代码：

graph.on('change:source change:target', function(link) {
    if (link.get('source').id && link.get('target').id) {
        // both ends of the link are connected.
        $('#link-input').css('display', 'block');
        link.attr('text/text', $('#link').val());
    }
});

即使我认为这无关紧要，HTML 就是这个：

<div id="link-input" class="form-group">
    <label for="description">Link Condition</label>
    <textarea class="form-control" rows="5" id="link"></textarea>
</div>

所以，当我写入该文本输入时，它会在该链接上特别刷新（但不知何故，我知道我应该维护我正在修改的对象）。如果有人知道另一种方法，请说，我这样做是因为我不知道如何以另一种方式做。

感谢您的关注，我希望足够明确

【问题讨论】：

标签： javascript jquery web jointjs

【解决方案1】：

您需要能够捕获链接视图上的指针点击事件

然后在 pointerclick 事件中打开一个文本框以获取输入并将其保存到链接属性中。

我为我的项目做了类似的事情

通过扩展普通链接创建新链接，同时扩展链接视图并覆盖pointerclick事件。

  joint.shapes.deviceLink = joint.dia.Link.extend({

    vertexMarkup: [
        '<g class="marker-vertex-group" transform="translate(<%= x %>, <%= y %>)">',
        '<circle class="marker-vertex" idx="<%= idx %>" r="1" />',
        '</g>'
    ].join(''),


    defaults: joint.util.deepSupplement({
      type: 'deviceLink',
        connection: { name: 'orthogonal' },
        attrs: {
           '.connection': { stroke: '#fe854f', 'stroke-width': 6 },
            sourcePort:{text:''},
            targetPort:{text:''},
            '.link-tools .tool-remove circle': { r: 8, fill:'#fff',position: 0.5 },
            customLabel:{text:''},
        },
        labels: [ { position: 0.5, attrs: { text: { text: '' } } }  ]
    }, joint.dia.Link.prototype.defaults),
  });    

 joint.shapes.deviceLinkView = joint.dia.LinkView.extend({
   pointerclick: function (linkview, evt, x, y){
     prompt for new label and change your label 
this.model.label(0, { attrs: { text: { text: 'new label' } } });
  },
 });

【讨论】：

这部分帮了我.model.label(0, { attrs: { text: { text: 'new label' } } });